使用伪元素方式,效果如下:

css如何在div框内画上+号(加号)?

全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .plus-icon {
            width: 72.22px;
            height: 72.22px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #205DA2;
            font-size: 75px;
            border-radius: 13.18px;
            border: 4.16px dashed #205DA2;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 11.1px;
        }

        .plus-icon::before {
            content: '';
            position: absolute;
            width: 31.25px;
            border-top: 4.16px solid;
        }

        .plus-icon::after {
            content: '';
            position: absolute;
            height: 31.25px;
            border-left: 4.16px solid;
        }
    </style>
</head>
<body>
<div class="plus-icon"></div>
</body>
</html>

 

相关文章:

  • 2021-08-10
  • 2022-12-23
  • 2021-05-27
  • 2021-05-21
  • 2021-12-10
  • 2021-05-18
猜你喜欢
  • 2022-12-23
  • 2021-09-03
  • 2022-12-23
  • 2021-08-14
  • 2021-07-06
  • 2021-10-18
相关资源
相似解决方案