是否可以使用CSS3绘制对角线?

时间:2010-12-27 11:30:01

标签: css3

我知道可以create a circle using CSS3

是否可以绘制对角线?

3 个答案:

答案 0 :(得分:16)

是的,有一种可能性:

您可以使用hr元素或其他元素并旋转它。这是一个演示:

是的,它适用于IE:)

http://jsfiddle.net/LqFAX/

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

答案 1 :(得分:4)

以下是完整示例,您只需要根据尺寸使用天使和翻译。

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

答案 2 :(得分:2)

你可以:

  1. 创建html元素(div)
  2. 将背景颜色设置为透明
  3. 将颜色设置为一个边框
  4. 旋转