通过CSS生成小三角

HTML与CSS创建向上箭头三角形

最新推荐文章于 2022-04-01 16:02:53 发布

原创最新推荐文章于 2022-04-01 16:02:53 发布 · 648 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

web 专栏收录该内容

17 篇文章

订阅专栏

HTML 通过CSS生成小三角

有些时候我们需要在特定的地方使用小三角，例如小米商城官网显示二维码的时候，下面的小三角。
在这里插入图片描述
其实这里实现的方式很简单，我们可以通过一个伪类::after配合边框来实现实现，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style>
        .box1{
            width: 0px;
            height: 0px;
            /* 通过边框来获取三角形 */
            border: 10px solid red;
            /* 我们这里需要的是一个向上的三角形，所以需要去除三边框，其他三个边度不能去掉 */
            border-top: none;
            /* 设置边框各边的颜色，颜色顺序依次是：上右下左。 */
            /* 在通过transprent将不需要的三角形的颜色设置为透明状态 */
            border-color: transparent transparent green transparent;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>