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>
相关推荐
Highcharts.js4 小时前
Highcharts 云端渲染的真相:交互式图表与服务器端生成的边界
前端·信息可视化·服务器渲染·highcharts·图表渲染
zhuyan1085 小时前
Linux 系统磁盘爆满导致无法启动修复指南
前端·chrome
编程牛马姐6 小时前
独立站SEO流量增长:提高Google排名的优化方法
前端·javascript·网络
NotFound4866 小时前
实战指南如何实现Java Web 拦截机制:Filter 与 Interceptor 深度分享
java·开发语言·前端
Dontla6 小时前
高基数(High Cardinality)问题介绍(Prometheus、高基数字段、低基数字段)
前端·数据库·prometheus
whuhewei9 小时前
为什么客户端不存在跨域问题
前端·安全
妮妮喔妮9 小时前
supabase的webhook报错
开发语言·前端·javascript
qq_12084093719 小时前
Three.js 大场景分块加载实战:从全量渲染到可视集调度
开发语言·javascript·数码相机
yivifu9 小时前
手搓HTML双行夹批效果
前端·html·html双行夹注
奔跑的卡卡10 小时前
Web开发与AI融合-第一篇:Web开发与AI融合的时代序幕
前端·人工智能