如何添加该斜线？

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>