用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伪元素：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

根据height的{​​{1}} width，加号将是响应的。

Answer 2

在原始div中使用另外两个div，以及一些有创意的CSS：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

编辑：添加百分比以使其大小与父级相同。

Answer 3

此解决方案的优点是十字形的大小以圆为单位的百分比，因此如果更改圆形大小，则十字形将采用。您可以随意修改十字架中酒吧的尺寸，但不要忘记相应地修改left和top。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

它使用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 5

您还可以考虑渐变：

可能的示例：

.circle {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20% 70%, 70% 20%;/* size it to a ratio(%) or static size (px, em, ..) */
  background-color: rgb(44, 108, 128)
}

.circle+.circle {
  width: 150px;
  height: 150px;
}

.circle+.circle+.circle {
  width: 100px;
  height: 100px;
}
.circle+.circle+.circle +.circle {
  width: 3em;
  height: 3em;
}
.circle+.circle+.circle +.circle +.circle {
  width: 1.5em;
  height: 1.5em;
}

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