Html 如何用css绘制对角线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24819252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw diagonal lines with css
提问by Server Khalilov
I need to draw in my div diagonal line. It should look like this:
我需要绘制我的 div 对角线。它应该是这样的：
My HTML:
我的 HTML：
<div style="height: 28px; width: 28px; border: 1px solid rgb(219,225,230);background-color:white;" >
</div>
Is it possible to do it only with CSS?
是否可以仅使用 CSS 来实现？
回答by Kheema Pandey
You can achieve the desired effect by using just one single div. Check the DEMO.
您只需使用一个 div 即可达到所需的效果。检查演示。
div{
border:1px solid gray;
width:28px;
height:28px;
position:relative;
}
div:after{
content:"";
position:absolute;
border-top:1px solid red;
width:40px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
Note:please add the vendor prefix for older browsers i.e. -moz, -webkit.
注意：请为旧浏览器添加供应商前缀，即 -moz、-webkit。
回答by Suresh Ponnukalai
Using CSS transformproperty you can achieve this. Look at the following HTML and CSS.
使用 CSStransform属性可以实现这一点。看看下面的 HTML 和 CSS。
HTML
HTML
<div style="border: 1px solid #000; width:100px; height:100px;">
<div id="hr" style="border-top:1px solid #ff00ff; height:100px; margin-left:-140px;"></div>
</div>
CSS
CSS
#hr {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
回答by AMDG
You could also use two elements and theirs borders like that :
您还可以像这样使用两个元素及其边框：
The HTML :
HTML ：
<div class="top-left">
<div class="cross-a"></div>
<div class="cross-b"></div>
</div>
The CSS :
CSS ：
.top-left {
position: absolute;
top: 0;
left: 0;
height: 28px;
width: 28px;
border-top: solid 2px #fff;
border-left: solid 2px #fff;
}
.cross-a, .cross-b {
position:absolute;
width:0;
height:0;
}
.cross-a {
top: -2px;
left: -2px;
border-top: 28px solid transparent;
border-right: 28px solid #000;
}
.cross-b {
top: 0px;
left: 0px;
border-top: 26px solid transparent;
border-right: 26px solid #FFFFFF;
}
The fiddle : http://jsfiddle.net/9yK6q/7/
回答by Deepak
You could use a hr element or a other element and rotate it.
您可以使用 hr 元素或其他元素并旋转它。
Here is a demo: http://jsfiddle.net/9HXTe/
这是一个演示：http: //jsfiddle.net/9HXTe/
div, hr {
-moz-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
transform: rotate(7.5deg);
}
