css3绘制三角形_css3畫空心三角形

作者：Monodyee | 2024-02-27 06:40:05

踩

css3畫空心三角形

以前做类似消息提示框指示方向的这种需求需要css配合图片才能做，现在只需要直接用css3就可以了。

这是运行效果图

这是完整代码


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin: 0; padding: 0;}
            .container{
                margin: 0 auto; 
                padding-top: 30px; 
                width: 1000px;
            }
            .squares{
                position: relative;
                margin-top: 30px;
                border: 1px solid #ccc;
                width: 100px;
                height: 100px;
            }
            .triangle{
                display: inline-block;
                position: absolute;
            }
            /* 下 */
            .triangleBottom{
                bottom: -15px;
                left: 35%;
                display: inline-block;
                border-top: 15px solid #ccc;
                border-right: 15px solid transparent;
                border-left: 15px solid transparent;
            }
            /* 左 */
            .triangleLeft{
                top: 35%;
                left: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-right: 15px solid #ccc;
                border-bottom: 15px solid transparent;
            }
            /* 上 */
            .triangleTop{
                top: -15px;
                left: 35%;
                display: inline-block;
                border-right: 15px solid transparent;
                border-bottom: 15px solid #ccc;
                border-left: 15px solid transparent;
            }
            /* 右 */
            .triangleRight{
                top: 35%;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 15px solid #ccc;
            }
        </style> 
    </head>
    <body>
        <div class="container">
            <div class="squares">
                <span class="triangle triangleBottom"></span>
                <span class="triangle triangleLeft"></span>
                <span class="triangle triangleTop"></span>
                <span class="triangle triangleRight"></span>
            </div>
        </div>
    </body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/150790