使用纯css实现告警图标

mini云码 发布日期： 2025-11-13 11:28

目前告警图标可以有两种方式实现，第一种是使用图标，第二种是使用纯css的方式实现。

使用图标的话，假如页面有很多图标，体积就会比较大。就使用css实现的话，依赖的东西就少了很多。也不需要下载第三方的图标库或css库。

下面是通过纯css实现告警图标的方法

     .alert-icon {
            display:inline-block;
            position: relative;
            width: 20px;
            height: 20px;
            background-color: #e74c3c; /* Error Red */
            border-radius: 50%; /* Make it a circle */
        }

        /* The vertical line of the exclamation mark */
        .alert-icon::before {
            content: '';
            position: absolute;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            width: 14%; /* Use percentage */
            height: 45%;
            background-color: white;
            border-radius: 1em; /* Use relative unit for scalable rounding */
        }

        /* The dot of the exclamation mark */
        .alert-icon::after {
            content: '';
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);
            width: 14%; /* Use percentage */
            height: 14%;/* Use percentage */
            background-color: white;
            border-radius: 50%;
        }

然后通过class引用这个类即可：

<div class="alert-icon"></div>