在盒子上插入一条线CSS

Question

我想在css中使该线穿过方块（下图），任何人都可以帮助我吗？

img http://www.brainmotion.com.br/download/img.png

如果我有这样一个div：

<div class="abcd"> 
</div> 

.a {border:1px solid;} 

非常感谢

Answer 1

您可以尝试使用CSS三角形伎俩来呈现2个三角形，第一有边框颜色同样的，你想要的颜色，第二个边框颜色相同，背景色的div的：

div { 
    width:49px; 
    height:49px; 
    border:1px solid black; 
    position:relative; 
} 
div:before { 
    content:''; 
    position:absolute; 
    width:0; 
    height:0; 
    top:-1px; 
    left:-1px; 
    border:25px solid transparent; 
    border-right:25px solid black; 
    border-bottom:25px solid black; 
    z-index:-3; 
} 
div:after { 
    position:absolute; 
    content:''; 
    width:0; 
    height:0; 
    top:1px; 
    left:1px; 
    border:24px solid transparent; 
    border-right:24px solid white; 
    border-bottom:24px solid white; 
    z-index:-2; 
} 

这里是fiddle

请注意，有了这个解决方案，你必须用试错法调整一下。

UPDATE：另一个简单的方法是使用linear-gradient产生对角线动态的div这样的background：

div { 
    width:50px; 
    height:50px; 
    border:1px solid black; 
    position:relative; 
    text-align:center; 
    line-height:50px; 
    font-size:25px; 
    background:linear-gradient(to bottom right, white, white 48%, black 50%, white 52%, white); 
} 

这里是更新fiddle

Answer 2

是的，你可以这样做父<div>结合使用transform: rotate(45deg);与overflow: hidden，但我会极大地阻止这种情况，因为这在浏览器兼容性方面会是一场灾难。我只是使用图像。

下面是一个例子（注：快速和马虎），我在Chrome测试的工作原理：

http://jsfiddle.net/97xsh/1/

Answer 3

这里是一个实现了同样的效果。 http://jsfiddle.net/j8USa/1/

.box{ 
    width:40px; 
    height:40px; 
    border:1px #000 solid; 
    overflow:hidden; 
    position:relative; 
    text-align:center; 
    vertical-align:middle; 

} 
.strike{ 
    position:absolute; 
    width:60px; 
    height:1px; 
    border-top:1px #000 solid; 
    margin-top:20px; 
    margin-left:-10px; 
    -webkit-transform:rotate(-45deg); 
    -moz-transform:rotate(-45deg); 
    transform:rotate(-45deg); 


} 
.box span{ 
    vertical-align:middle; 
    font-size: 26pt; 
    color:red; 
}