通过CSS生成小三角

最新推荐文章于 2024-06-19 14:48:22 发布

周巴帝

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量549

点赞数

分类专栏： web 文章标签： css html css3

本文链接：https://blog.csdn.net/Hello_super/article/details/122873680

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述

周巴帝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过CSS生成小三角

HTML 通过CSS生成小三角有些时候我们需要在特定的地方使用小三角，例如小米商城官网显示二维码的时候，下面的小三角。其实这里实现的方式很简单，我们可以通过一个伪类::after配合边框来实现实现，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三角形</title> <style>
复制链接

扫一扫

专栏目录