css3 写等边三角形（非border）

最新推荐文章于 2024-04-10 18:17:09 发布

EvaXUAN

最新推荐文章于 2024-04-10 18:17:09 发布

阅读量2.5k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/taotaomin99/article/details/72330025

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这是别人给我出的题

我觉得蛮麻烦的

还是用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>