如何添加該斜線？

Question

我想在border屬性中添加該行，而不是創建新的div。 這可能嗎？

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

Answer 1

您可以使用CSS3變換風格做到這一點。您可以使用jQuery aswell：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

定義傾斜類像下面的，它適用於任何DIV不管其尺寸：

注意您還應該在主要元素上設置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>