css 画出三角形

css 画出三角形

越行勤 544 2021-01-04

css画三角

没有大小的div有边框。

如果div 没有大小而有边框那么会咋样呢？

image-20210104130800625

    <style>
        div {
            width: 0;
            height: 0;
            border: 100px solid purple;
            margin: 30px auto;
        }
    </style>
<body>
    <div></div>
</body>

结果其实显而易见，如果只有一边的边框呢？

border-bottom: 100px solid purple;

其实这个不会显示出来的。

四个不同颜色的边框

        div {
            width: 0;
            height: 0;
            /* border: 100px solid purple; */
            border-bottom: 100px solid red;
            border-top: 100px solid green;
            border-left: 100px solid thistle;
            border-right: 100px solid purple;
            margin: 30px auto;
        }

image-20210104132000521

其实我们很快就会发现，在没有大小时， 每一个边框其实就是个三角形。那么我们要求其他的边框是透明的，只留下一个岂不是就有三角形了。

        div {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom-color:red;
            margin: 30px auto;
        }

image-20210104132326563

这个border的宽度就是这个三角形的高。

为了保持兼容性，我们通常还会加入这这两句话

line-height:0;font-size:0;

        div {
            width: 0;
            height: 0;
            line-height:0;
            font-size:0;
            border: 100px solid transparent;
            border-bottom-color:red;
        }

练习

image-20210104134323984

我们实现这个效果

image-20210104134424037

根据分析，我们实现这个效果可以div里套一个span,关键就是span的定位了，我根据调试总结了如下的公式。

            position: absolute;
            top: 50%;/*先走大盒子的一半*/
            right: -<三角高度的两倍>px;
            margin-top: -<三角高度>px;

完整代码如下：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 30px auto;
        }

        .box1 span {
            position: absolute;
            top: 50%;
            right: -20px;
            margin-top: -10px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-left-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1">
        <span></span>
    </div>
</body>

结语

放假的第10天
小程序

CSS