Сложная форма CSS

Question

Мне нужна помощь CSS.Это сложно объяснить, но, глядя на фрагмент, мне нужна черная часть без красного.

Я использовал два элемента, но это возможно с одним ...

.q-rounder {
  background: #222;
  width: 15px;
  height: 15px;
}

.quarter-circle {
  width: 15px;
  height: 15px;
  background: red;
  border-radius: 100px 0 0 0;
  -moz-border-radius: 100px 0 0 0;
  -webkit-border-radius: 100px 0 0 0;
}

<div class="q-rounder">
  <div class="quarter-circle"></div>
</div>

( скрипка )

Answer 1

Если вы можете использовать сплошной цвет фона, может быть, это подходит для вас?

По существу, элементы before располагаются за прямоугольником с радиусом границы и сплошным цветом фона.

Поддерживается в любом браузере и версии.

.q-rounder {
  position: relative;
  background: white;
  width: 15px;
  height: 15px;
  border-radius: 100px 0 0 0;
}

.q-rounder:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  background: black;
  content: "";
  z-index: -1;
}

<div class="q-rounder">

</div>

Answer 2

Использовать радиальный градиент в качестве фона

.q-rounder {
  background: 
    radial-gradient(farthest-side at bottom right,transparent 94%, #222);
  width: 15px;
  height: 15px;
}

<div class="q-rounder">
</div>

Другой синтаксис с at для лучшей поддержки ( safari не поддерживает at)

.q-rounder {
  background: 
    radial-gradient(farthest-side,transparent 94%, #222) top left/200% 200%;
  width: 15px;
  height: 15px;
}

<div class="q-rounder">
</div>