通过css伪类实现带箭头的div

栖柚与苏璃

已于 2023-04-17 13:35:09 修改

阅读量971

点赞数

文章标签： css html css3

于 2023-04-10 15:30:41 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73075579/article/details/130061400

版权

本文介绍了如何利用CSS伪类来实现带有箭头效果的div元素，特别适用于创建提示框或者指示器。在Chrome浏览器中，这种技术能够呈现出理想的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过css伪类实现带箭头的盒子</title>
    </title>
    <style>
        .icon {
            border: 1px solid #ddd;
            width: 250px;
            position: relative;
            height: 100px;
            background: #ffffff;
            margin: auto;
            border-radius: 10px;
            box-sizing: border-box;
        }

        /* transparent相当于rgba(0,0,0,0) */
        .icon::before {
            border-style: solid;
            /*边框宽度，四个参数依次上、右、下、左*/
            /*一个宽度14，高度24的左向三角区域*/
            border-width: 12px 14px 12px 0;
            /*所有区域都设置为透明，只填充三角区域，与盒子边框颜色相同*/
            border-col

最低0.47元/天解锁文章