使用CSS3绘制几个常见的图案（三角、箭头）

最新推荐文章于 2025-06-21 09:15:59 发布

Sweet_HaoChen

最新推荐文章于 2025-06-21 09:15:59 发布

阅读量1.3w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue学习笔记

本文链接：https://blog.youkuaiyun.com/qq_38311097/article/details/82991078

Vue学习笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用CSS绘制三角形、箭头和关闭键等基本形状。通过调整border-width和border-color属性，可以轻松创建各种形状，同时展示了旋转和定位技巧。

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

一、绘制三角形

首先先做一个测试深入理解一下盒子模型，主要体会一下height和border-width的用法：

        #div1{
            height: 80px;
            border-style: solid;
            border-width: 100px 100px 100px 100px;
            border-color: red forestgreen blue cyan;
            width: 80px;
        }

<body>
    <div id="div1">
        
    </div>
</body>

最后结果为：

其中，红色的块儿代表是上边框宽度，右边的块儿代表右边框宽度，以此类推，发现几个边距的宽度而言，他们之间的分界恰好是这个正方形的对角线所在的直线，如果里面的小盒子宽高无穷小，那么这个图形将是一个由四块不同颜色三角形拼接而成的图形，因此可以利用这个性质进行绘制三角形。若height:0;width:0;得到下面的图形：

如果我们想要得到一个上三角，那么根据刚刚的原理，只要将上边框、左右边框设置为隐藏，即可实现一个上三角。

border-color: transparent transparent blue transparent;

但是有个问题，这里这个三角距离上面总是有100px的边距，是因为隐藏的边框依然占位，所以直接将上边框去掉就好了。

但这里不能只将下边框的border-width设为0，否则会出现什么都得不到的情况。为了寻找原因，我们去掉左边框，只要右边框和下边框，即：

border-width: 0px 100px 100px 0px;

然后得到下面的图形：

这时可以说明，下三角的左半部分实际上也是由左边距拥有的，如果左边距为0，那么左半边就不存在了，只剩下右半边。如果这时再把右半边去掉，那么这个下三角就什么都没有了。

二、绘制一个箭头

想要实现一个箭头的话就比较简单了，步骤是首先先生成一个正方形，这个正方形有上、右边框（只要是相邻的两个边距实际上都是可以的），然后制定这个边框的宽度和颜色（这个值也就决定了箭头的宽度和颜色）。之后根据需要旋转即可。注意的是，旋转的中心就是盒子模型的几何中心。

变化成为：

代码为

<div><a href="javascript:void(0)" class="down-arrow"></a></div>

    .down-arrow {            
        width: 40px;            
        height: 40px;        
    }         
    .down-arrow:after {            
        content: '';            
        display: block;            
        width: 25px;            
        height: 25px;            
        border-right: 1px solid #888;            
        border-top: 1px solid #888;            
        -webkit-transform: rotate(135deg); /*箭头方向可以自由切换角度*/            
        transform: rotate(135deg);
    }

三、绘制一个关闭键

原理和画箭头类似，不过这里，:after的旋转方向是在前一个的基础上继续旋转偏移的。也就是说若第一个有旋转角度，:after没有的时候，第二个和第一个重合。

    .false {
    position: relative;
    width: 2em;
    height: .3em;
    background-color: #000;
    transform: rotate(45deg);
    border-radius: .15em;
    }
    .false:after {
        content: "";
        position: absolute;
        width: 2em;
        height: .3em;
        background-color: #000;
        transform: rotate(90deg);
        border-radius: .15em;
    }