我有一个模型，用于制作看起来非常简单的加号。然而，我的 CSS 技能并不是很好。制作圆圈没什么大不了的，但在里面制作加号我似乎无法弄清楚。这就是我正在尝试做的事情。
Mockup
这是我目前拥有的
到目前为止，这是我的代码：
html
<div class=circle></div>
CSS
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: rgb(44,108,128)
}
非常基本的东西，但如果有人知道如何添加加号，你会让我的夜晚变得更加美好！谢谢您的帮助！
你可以很好地使用::after and ::before伪元素：
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: rgb(44, 108, 128);
position: relative;
}
.circle::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 10px;
margin-top: -5px;
top: 50%;
left: 5px;
right: 5px;
z-index: 9;
}
.circle::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 10px;
margin-left: -5px;
left: 50%;
top: 5px;
bottom: 5px;
z-index: 9;
}
<div class="circle"></div>
基于height of width of the <div>，plus将是一个响应式的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
