复杂的 CSS 形状答案

【问题标题】：Complex CSS Shape复杂的 CSS 形状
【发布时间】：2019-07-23 23:58:55
【问题描述】：

我需要一些 CSS 帮助。很难解释，但是看着 sn-p，我需要没有红色的黑色部分。

我使用了两个元素，但应该可以使用一个......

.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)

【问题讨论】：

标签： css css-shapes

【解决方案1】：

如果您可以使用纯色背景色，也许这适合您？

基本上，之前的元素位于一个矩形的后面，该矩形的边框半径为纯色背景。

在所有浏览器和版本中均受支持。

.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>

【讨论】：

这和他已经做的差不多了，你只是把红色换成了白色。我认为这个想法是要有透明度
如果不需要透明度，我的方法有更多的浏览器支持：D
更多的浏览器支持比什么？如果不需要透明度，那么 OP 已经有了他的代码，不是吗？
他要求一个只有一个元素的解决方案

【解决方案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 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>

【讨论】：