css写出各种小三角形

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

随你.

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

阅读量677

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u013638493/article/details/39370923

本文介绍如何使用纯CSS绘制不同方向的小三角形，并提供了一个实际应用案例。通过简单的边框设置，即可实现美观且灵活的箭头图标。

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

在网页上有些地方，加上小三角形比不加，效果看上去要好好多。现在不用图片也可以弄出小三角，就是用我们的CSS直接写出形状来。如下：

<!DOCTYPE HTML>
<html>
<head>
        <meta charset="UTF-8">
        <title>小三角</title>
        <style type="text/css">
            div{ margin-bottom:20px;}
               /*箭头向上*/
                .arrow-up {
                        width:0; 
                        height:0; 
                        border-left:10px solid transparent;
                        border-right:10px solid transparent;
                        border-bottom:10px solid #000;
                }
                        
                 /*箭头向下*/
                .arrow-down {
                        width:0; 
                        height:0; 
                        border-left:10px solid transparent;
                        border-right:10px solid transparent;
                        border-top:10px solid #000;
                }
                        
                 /*箭头向左*/
                .arrow-left {
                        width:0; 
                        height:0; 
                        border-top:10px solid transparent;
                        border-bottom:10px solid transparent; 
                        border-right:10px solid #000; 
                }
                   
                /*箭头向右*/
                .arrow-right {
                        width:0; 
                        height:0; 
                        border-top:10px solid transparent;
                        border-bottom: 10px solid transparent;
                        border-left: 10px solid #000;
                }
                
                .box{ width:300px; height:300px; background:#838383; position:relative;}
                .box:after{
                    position:absolute;
                        right:-20px;
                        top:10px;
                    display:block;
                        content:"";
                    width:0; 
                        height:0; 
                        border-top:10px solid transparent;
                        border-bottom: 10px solid transparent;
                        border-left: 10px solid #838383;
                }
                
        </style>
</head>
<body>
        
        <div class="arrow-up">
     <!--向上的三角-->
        </div>
        <div class="arrow-down">
                <!--向下的三角-->
        </div>
        <div class="arrow-left">
                <!--向左的三角-->
        </div>
        <div class="arrow-right">
                <!--向右的三角-->
        </div>
        
        <div class="box">
                 :after 伪元素在元素之后添加内容实现小三角
        </div>
        
</body>
</html>

可以根据自己的需要改变大小和颜色，试试吧，还不错的哦。