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>
相关推荐
m0_719084112 分钟前
React笔记张天禹
前端·笔记·react.js
Ziky学习记录16 分钟前
从零到实战:React Router 学习与总结
前端·学习·react.js
wuhen_n22 分钟前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n25 分钟前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
我是一只puppy31 分钟前
使用AI进行代码审查
javascript·人工智能·git·安全·源代码管理
颜酱32 分钟前
从二叉树到衍生结构:5种高频树结构原理+解析
javascript·后端·算法
狗哥哥1 小时前
微前端路由设计方案 & 子应用管理保活
前端·架构
前端大卫1 小时前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘2 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare2 小时前
浅浅看一下设计模式
前端