Question

我想在border属性中添加该行，而不是创建新的div。可能吗？

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

Answer 1

您可以使用CSS3转换样式来执行此操作。您也可以使用jQuery：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;;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

如何添加斜线？

4 个答案: