Making a plus sign with css

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>

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.


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.


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>

Tags:

Html

Css

Recent Posts