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天
小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/04/css画出三角形
最后更新于:  263  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟