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>
相关推荐
我只会写Bug啊11 小时前
Vue文件预览终极方案:PNG/EXCEL/PDF/DOCX/OFD等10+格式一键渲染,开源即用!
前端·vue.js·pdf·excel·预览
扯蛋43812 小时前
LangChain的学习之路( 一 )
前端·langchain·mcp
Mr.Jessy12 小时前
Web APIs学习第一天:获取 DOM 对象
开发语言·前端·javascript·学习·html
午安~婉12 小时前
javaScript八股问题
开发语言·javascript·原型模式
西西学代码13 小时前
Flutter---个人信息(5)---持久化存储
java·javascript·flutter
芝麻开门-新起点13 小时前
flutter 生命周期管理:从 Widget 到 State 的完整解析
开发语言·javascript·ecmascript
ConardLi14 小时前
Easy Dataset 已经突破 11.5K Star,这次又带来多项功能更新!
前端·javascript·后端
冴羽14 小时前
10 个被严重低估的 JS 特性,直接少写 500 行代码
前端·javascript·性能优化
rising start14 小时前
四、CSS选择器(续)和三大特性
前端·css
一 乐14 小时前
高校后勤报修系统|物业管理|基于SprinBoot+vue的高校后勤报修系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·毕设