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>
相关推荐
南屿im1 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端1 分钟前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军2 分钟前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心4 分钟前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝6 分钟前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
受之以蒙6 分钟前
Rust & WASM 之 wasm-bindgen 基础:让 Rust 与 JavaScript 无缝对话
前端·笔记·rust
中微子7 分钟前
React Props 传值规范详解
前端·react.js
namehu7 分钟前
Taro 小程序 Video 组件 referrer-policy="origin" 属性失效排查记
前端·taro
卸任12 分钟前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js
Codebee16 分钟前
OneCode图生代码技术深度解析:从可视化设计到注解驱动实现的全链路架构
css·人工智能·算法