CSS로 기울어 진 div 구현을 어떻게 달성 할 수 있습니까?

Question

CSS로 어떻게 구현할 수 있습니까? 첨부 된 이미지를 참조하십시오.

Answer 1

이를 달성하기 위해 여러 가지 방법이 있습니다; 당신은 단순히 use a forward-slash as the content of a pseudo element 일 수 있습니다. 이것은 변환/비뚤어 짐을 사용하는 옵션보다 더 뒤쪽으로 지원할 것입니다. 나는 이전 단락에서 언급으로

<span>Item One</span><span>Item Two</span> 

span:after { 
    content: "/"; 
    font-size: 5em; 
    vertical-align: middle; 
} 

span:last-child:after { 
    content: none; 
} 

또 다른 방법

은 skew a pseudo element이다.

span::after { 
    content: ""; 
    margin: 0 1em; 
    background: black; 
    display: inline-block; 
    vertical-align: middle; 
    transform: skewX(-20deg); 
    width: .5em; height: 5em; 
} 

span:last-child::after { 
    content: none; 
} 

이 의사 요소를 처리 할 때, 그러나 단 하나의 : 접두어, 인터넷 익스플로러 8을 지원하는 것을 명심하는 것이 중요합니다. Internet Explorer 9까지는 ::으로 사용할 수 있습니다.

Answer 2

div 한쪽면에 border을 입력 한 다음 -webkit-transform에서 rotate까지 사용할 수 있습니다. 이 질문 오프 주제에 왜

<div class="background"> 
</div> 
<div><label>Some Text Here</label></div> 
<div id="dv"> 
<label>Some Different Text Here</label> 
</div> 

CSS

.background { 
border-top: 3px solid #ccc; 
padding: 0; 
margin: 0; 
height: 50px; 
-webkit-transform: translateY(-20px) 
translateX(5px) 
rotate(330deg); 
} 
#dv 
{ 
-webkit-transform: translateY(-30px) translateX(300px) rotate(-1deg); 
} 

여기 DEMO