Question

我有一个图标，我需要从右上角到左下角划伤它。这是用CSS做的任何方式吗？

.sizebt {
    display:block;
    height:11px;
    border:1px solid #d9d9d9;
    background:#d1d1d1;
    color:#999;
    float:left;
    margin:0 6px 6px 0;
    text-align:center;
    padding:2px 6px;
    line-height:11px;
    text-decoration:none;
}
.sizebt_sel {
    display:block;
    height:11px;
    border:1px solid #666666;
    background:#EEEEEE;
    float:left;
    margin:0 6px 6px 0;
    text-align:center;
    padding:2px 6px;
    line-height:11px;
    text-decoration:none;
}

Answer 1

也许您可以尝试将After添加到您的图标容器中，如下所示：

.icon:after {
    content:" ";
    height:10px;
    width:150px;
    background-color:red;
    position:absolute;
    top:40px;
    left:-30px;
    -moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

和示例：http://jsfiddle.net/o2yoh5LL/

Answer 2

如何使用css3转换？

.sizebt_sel:after{
    display:block;
    top:2px;
    left:3px;
    height:14px;
    content:" ";
    position:absolute;
    padding:2px 6px;
    border-left:1px solid red;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
 }

请参阅jsfiddle

Answer 3

使用类似的代码。

＆＃13;

 div {
   border-top: 1px solid black;
 }
 .box {
   height: 100px;
   width: 100px;
   border: 1px solid black;
   position: relative;
 }
 div#div2 {
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   margin: 39px 0px 0px -45px;
   position: absolute;
   top: 0;
   height: 67px;
   width: 142px;
 }

＆＃13;

<div>hi test</div>

<div class="box">

  this is test
  <div id="div2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

  </div

＆＃13;

CSS中的对角直线

3 个答案: