CSS 是否可以使用 CSS3 绘制对角线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4538368/
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
Is it possible to draw a diagonal line using CSS3?
提问by alexchenco
I know that is possible to create a circle using CSS3
我知道可以使用 CSS3 创建一个圆圈
Is it possible to draw a diagonal?
是否可以绘制对角线？
回答by meo
yes it is, there is more then one possibility:
是的，有不止一种可能性：
You could use a hrelement or a other element and rotate it. Here is a demo:
您可以使用一个hr元素或其他元素并旋转它。这是一个演示：
And yes it works in IE to :)
是的，它在 IE 中有效：)
-moz-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod='auto expand')";
zoom: 1;
回答by Madman
Here is complete sample, you just need to play with an angel and translation base on your dimensions.
这是完整的示例，您只需要根据您的维度玩天使和翻译。
<div style="background-color: #BCBCBC; width: 100px; height: 50px; padding: 0; margin: 0">
<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(-20px) translateX(5px) rotate(27deg); "></div>
</div>
回答by Arjan
You can:
你可以：
- create html element (div)
- set background color to transparent
- set color to one border
- rotate
- 创建 html 元素 (div)
- 将背景颜色设置为透明
- 将颜色设置为一个边框
- 旋转
