circle with X

by jpeter06

HTML

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

CSS

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border-style:solid;
  border-color: green;
  display: flex;
  align-items: center;
  text-align: center;
  position:relative;
}

.close {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 90%;
  height: 90%;
  opacity: 0.3;
}

.close:before, .close:after {
  position: absolute;
  left: 50%;
  content: ' ';
  height: 90%;
  width: 10%;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}