css三角图标

案例三角:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 100px auto;
            position: relative;
            height: 100px;
            width: 50px;
            background-color: pink;

        }

        .box span {
            position: absolute;
            right: 15px;
            top: -10px;
            height: 0;
            width: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <span></span>
    </div>
</body>

</html>
相关推荐
江城开朗的豌豆9 分钟前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七42 分钟前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03011 小时前
vue3笔记(2)自用
前端·javascript·笔记
UrbanJazzerati1 小时前
JavaScript Promise完整指南
javascript
德育处主任Pro1 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端
拾光拾趣录1 小时前
setTimeout(1) 和 setTimeout(2) 的区别
前端·v8
拾光拾趣录1 小时前
内存泄漏的“隐形杀手”
前端·性能优化
摸鱼仙人~2 小时前
HttpServletRequest深度解析:Java Web开发的核心组件
java·开发语言·前端
索西引擎2 小时前
【工程化】浅谈前端构建工具
前端·webpack·gulp·turbopack
ZzMemory2 小时前
一文搞懂前端开发必备的导入导出方式
前端·面试·前端工程化