Making a plus sign with css

Question

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.

Mockup

Here is what I currently have

Here is my code so far:

html

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

Answer 1

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>

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

Answer 2

Here's a solution which actually draws a '+' character in a font of your choosing.

It uses a flexbox to achieve horizontal and vertical centering.

.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

Using another two divs inside your original div, and some creative 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>

That looks pretty close to your mockup.

Edit: Added percentages to make it sizeable to the parent size.

Answer 4

This solution has the advantage that the size of the cross is in % relative to the circle, so if you change circle size, the cross will adopt. Feel free to edit the sizes of the bars in the cross, but don't forget to modify left and top accordingly.

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

Answer 5

You may also consider a gradient:

possible example:

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