css - 复杂的 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>

( fiddle )

Answer 1

使用径向渐变作为背景

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

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

另一种带有 at 的语法，以获得更好的支持 ( safari doesn't support the at )

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

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