Как реализовать данный логотип на css без использования svg?

Question

Не могу понять, как можно реализовать данный логотип ?

Answer 1

Можно с некоторыми ограничениями.

Если чуть еще покопаться, можно сделать полупрозрачным. Но вот обрезать правую дугу так не получится, я использовал промежуточный блок под цвет фона. Если разрыв между дугами должен быть прозрачным - тогда png или svg.

.logo {
  width: 400px;
  height: 222.5px;
  overflow: hidden;
  position: relative;
}

.arc {
  position: absolute;
  top: 0;
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  border-width: 45px;
  border-color: #C0BDC9;
  border-top-style: solid;
}

.lower:before,
.upper:before,
.upper:after {
  content: "";
  position: absolute;
  background-color: #C0BDC9;
  width: 45px;
  height: 45px;
  border-radius: 100%;
  z-index: -1;
}

.arc:before {
  top: -45px;
}

.arc:after {
  bottom: -22.5px;
}

.lower {
  border-left-style: solid;
  border-top-left-radius: 100%;
  right: 22.5px;
}

.lower:before {
  right: -22.5px;
}

.upper:before {
  left: -22.5px;
}

.upper:after {
  right: -45px;
}

.upper,
.middle {
  border-right-style: solid;
  border-top-right-radius: 100%;
  left: 22.5px;
}

.middle {
  width: 245px;
  height: 245px;
  top: -45px;
  border-color: #fff;
}

<div class="logo">
  <div class="arc lower"></div>
  <div class="arc middle"></div>
  <div class="arc upper"></div>
</div>

БЛОГ НА HUSL

Как реализовать данный логотип на css без использования svg?

Ответы (1 шт):