用CSS制作加号 [英] Making a plus sign with css

问题描述

我有一个样机，用于制作看起来很简单的加号.但是，我的CSS技能不是很好.绕圈没什么大不了的，但是在里面弄个加号我似乎不知道.这就是我想要做的.

I have a mockup for making what looks like a pretty simple plus sign. However, My css skills are not super great. Making the circle is no big deal but making the plus sign inside of it I can't seem to figure out. Here is what I'm trying to do.

这是我目前拥有的

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

Here is my code so far:

<div class=circle></div>

CSS

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

非常基本的东西，但是如果有人知道如何添加加号，那会让我的夜晚好多了！感谢您的帮助！

So pretty basic stuff but if anyone know how to add the plus sign you'd be making my night quite a bit nicer! Thanks for the help!

推荐答案

您可以很好地使用::after和::before伪元素:

You can very well use ::after and ::before pseudo elements:

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

根据<div>的width的height，加号将是响应式的.

Based on the height of width of the <div>, the plus will be a responsive one.

这篇关于用CSS制作加号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！