使用伪元素方式,效果如下:
全部代码:
<!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>