對角線穿過CSS

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

如何使用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 2

使用的代碼。

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

<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

Answer 3

也許你可以嘗試後添加到您的圖標容器是這樣的：

.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/