用css做加号

Question

我有一个模型,用于制作看起来非常简单的加号.但是,我的css技能不是很棒.制作圆圈并不是什么大不了的事情,但在里面加上一个加号我似乎无法弄明白.这就是我想要做的.

小样

这是我现在拥有的

到目前为止,这是我的代码:

HTML

<div class=circle></div>

CSS

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    background-color: rgb(44,108,128)
}

所以非常基本的东西,但如果有人知道如何添加加号,你会让我的夜晚更好!谢谢您的帮助!

Answer 1

你可以很好地使用::after和::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中width的<div>,正将是一个负责任的一个.

Answer 2

这是一个实际使用您选择的字体绘制“+”字符的解决方案。

它使用 flexbox 来实现水平和垂直居中。

.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: rgb(44,108,128)
}

.circle::before {
  content: "+";
  height:200px;
  width:200px;
  font-size:200px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-family:courier;
  color:white;
}

<div class="circle"></div>

Answer 3

在原始div内使用另外两个div和一些创意CSS：

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: rgb(44,108,128)
}

.horizontal-plus {
  position: relative;
  background-color: #FFFFFF;
  width: 50%;
  height: 12.5%;
  left: 25%;
  top: 43.75%;
}
.vertical-plus {
  position: relative;
  background-color: #FFFFFF;
  width: 12.5%;
  height: 50%;
  left: 43.75%;
  top: 12.5%;
}

<div class=circle>
  <div class='horizontal-plus'></div>
  <div class='vertical-plus'></div>
</div>

看起来非常接近您的模型。

编辑：添加了百分比以使其可缩放到父尺寸。

Answer 4

这个方案的优点是十字的大小是相对于圆圈的百分比，所以如果你改变圆圈的大小，十字将采用。随意编辑在交叉条的大小，但不要忘了修改left和top相应。

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: rgb(44,108,128);
  position: relative;
}

.bar {
  margin: 0 auto;
  position: absolute;
  background-color: #fff;
}

.horizontal {
  width: 70%;
  height: 20%;
  left: 15%;
  top: 40%;

}

.vertical {
  width: 20%;
  height: 70%;
  left: 40%;
  top: 15%;
}

<div class=circle>
  <div class="bar horizontal"></div>
  <div class="bar vertical"></div>
</div>