경사 선을 추가하는 방법은 무엇입니까?

Question

경계선 속성에 해당 줄을 추가하고 싶습니다. 새 div를 만들지 마십시오. 가능합니까?

http://i.stack.imgur.com/9SsYo.png

Answer 1

당신은 CSS3가 그렇게 스타일을 변환 할 수 있습니다. How to rotate a div using jQuery

CSS3 변환 스타일을 사용하려면 div의 테두리를 설정하고 회전해야합니다. div에 무언가 (이미지, 텍스트 등)가 있으면 div와 함께 회전하므로 동일한 방법으로 회전을 해제해야합니다.

이것이 도움이되지 않으면 jsFiddle에 코드를 붙여 넣으십시오. 그러면 도움이 될 것입니다. 행운을 빕니다.

Answer 2

확실하지,하지만 당신은 클립을 보는 경우 :

-webkit-clip-path: polygon(28% 0, 100% 0, 100% 81%, 74% 100%, 0 100%, 0 19%); 
clip-path: polygon(28% 0, 100% 0, 100% 81%, 74% 100%, 0 100%, 0 19%); 

Answer 3

당신은이 작업을 수행하기 위해 CSS 의사 클래스를 사용할 수 있습니다. 상자 클래스에

https://jsfiddle.net/L87jf1d8/2/

사용 :before 및 :after

<div class="box"> 
Name 
</div> 

CSS는 :

.box{ 
    padding:30px; 
    text-align:center; 
    width:200px; 
    border:1px solid #000; 
} 
.box:after,.box:before{ 
    content: " "; 
    width: 55px; 
    height: 1px; 
    transform: rotate(-45deg); 
    background: #000; 
    position: absolute; 
} 
.box:after{ 
    margin-left: 64px; 
    margin-top: 29px; 
} 
.box:before{ 
    margin-left: -120px; 
    margin-top: -12px; 
} 

Answer 4

은 다음과 같은 경사 클래스를 정의 관계없이 모든 사업부에 적용 그것의 크기 :

참고 또한 주 요소에 overflow: hidden;을 설정해야합니다.

.box1, .box2, .box3 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    margin-top: 10px; 
 
} 
 

 
.box2 { 
 
    width: 200px; 
 
} 
 

 
.box3 { 
 
    width: 300px; 
 
} 
 

 
.slant:before, .slant:after { 
 
    content: ''; 
 
    border: 1px solid tomato; 
 
    display: inline-block; 
 
    transform: translate3d(-50%, -50%, 0) rotate(45deg); 
 
    position: relative; 
 
    top: 0; 
 
    right: 0; 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 

 
.slant:after { 
 
    transform: translate3d(-150%, -50%, 0) rotate(45deg); 
 
    top: 100%; 
 
    left: 100%; 
 
}

<div class="box1 slant"></div> 
 
<div class="box2 slant"></div> 
 
<div class="box3 slant"></div>