css3绘制三角形

最新推荐文章于 2025-05-14 17:03:41 发布

原创最新推荐文章于 2025-05-14 17:03:41 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #transparent

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何利用CSS3来创建指示方向的消息提示框，以前这个需求通常需要结合CSS和图片，但现在仅使用CSS3就能实现。文章展示了运行效果及完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前做类似消息提示框指示方向的这种需求需要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>