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>
相关推荐
webkubor11 分钟前
🧠 2025:AI 写代码越来越强,但我的项目返工却更多了
前端·机器学习·ai编程
Sun_小杰杰哇15 分钟前
Dayjs常用操作使用
开发语言·前端·javascript·typescript·vue·reactjs·anti-design-vue
戴维南17 分钟前
TypeScript 在项目中的实际解决的问题
前端
晴殇i19 分钟前
package.json 中的 dependencies 与 devDependencies:深度解析
前端·设计模式·前端框架
basestone20 分钟前
🚀 从重复 CRUD 到工程化封装:我是如何设计 useTableList 统一列表逻辑的
javascript·react.js·ant design
pas13622 分钟前
25-mini-vue fragment & Text
前端·javascript·vue.js
何贤26 分钟前
2025 年终回顾:25 岁,从“混吃等死”到别人眼中的“技术专家”
前端·程序员·年终总结
软件开发技术深度爱好者28 分钟前
JavaScript的p5.js库使用介绍
javascript·html
冴羽29 分钟前
CSS 新特性!瀑布流布局的终极解决方案
前端·javascript·css
满天星辰35 分钟前
Vue 响应式原理深度解析
前端·vue.js