css3 寫等邊三角形(非border)

這是別人給我出的題

我覺得蠻麻煩的

還是用border寫出來的方便一些

反正也是拓展嘛,就來一小段

主要是用css3的transform的兩個屬性實現,origin rotate

下面看下代碼:

代碼段

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .box{
                border-bottom:dashed 1px #030303;
                width:400px;
                height:400px;
                margin: 0 auto;
                box-sizing: border-box;
                position: relative;
            }
            .box:before,.box:after{
                content:"";
                display: block;
                width:400px;
                height:400px;
                box-sizing: border-box;
                position: absolute;
            }
            .box:before{
                border-left:dashed 1px #030303;
                transform-origin: left bottom;
                transform: rotate(30deg);
            }
            .box:after{
                border-bottom:dashed 1px #030303;
                transform: rotate(60deg);
                transform-origin: right bottom;
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div class='box'>

        </div>
    </body>
</html>

查看demo請點擊這裏

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章