使用纯CSS绘制超椭圆

Question

正如标题所说：你如何使用纯CSS绘制超椭圆（特别是Apple iOS7 / 8）？不太确定它是否可能，但仍然存在。

参考图片：

Answer 1

这并不准确，但您可以调整一下这个想法以获得可接受的内容。基本上，您使用带有圆形边框的包含元素下的带有椭圆边框的::before和::after伪元素进行分层，以获得效果。

我将伪元素的背景颜色设置为蓝色和绿色以进行可视化，但它们将设置为包含元素的颜色。

JSFiddle demo

Answer 2

我们可以使用 SVG 作为遮罩来创建超椭圆。我认为目前最好的解决方案。

.superellipse {
  height: 200px;
  width: 200px;
  
  --mask: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M199.178 99.589C199.178 165.982 165.982 199.179 99.5893 199.179C33.1963 199.179 0 165.982 0 99.589C0 33.1964 33.1963 0 99.5893 0C165.982 0 199.178 33.1964 199.178 99.589Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  background: linear-gradient(to bottom right, orange, orangered);
  
  /* to center the text */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}

<div class="superellipse">?</div>

我使用的 svg：

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M199.178 99.589C199.178 165.982 165.982 199.179 99.5893 199.179C33.1963 199.179 0 165.982 0 99.589C0 33.1964 33.1963 0 99.5893 0C165.982 0 199.178 33.1964 199.178 99.589Z" fill="black"/>
</svg>

我用 url-encoder

编码

CSS Houdini 怎么样？

现在我们可以使用 CSS Paint API 提供的 CSS Houdini。我们将使用一个名为 smooth-corners 的库，它注册一个正在绘制超椭圆的新油漆。

但目前只有 Chrome 和 Edge 是 supported。

if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners')

.superellipse {
  display: inline-block;
  margin: 20px;
  height: 150px;
  width: 150px;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: linear-gradient(to bottom right, deeppink, orangered);
}

<div class="superellipse" style="--smooth-corners: 0.6"></div>
<div class="superellipse" style="--smooth-corners: 1.5"></div>
<div class="superellipse" style="--smooth-corners: 2.2"></div>
<div class="superellipse" style="--smooth-corners: 2.6"></div>
<div class="superellipse" style="--smooth-corners: 3"></div>
<div class="superellipse" style="--smooth-corners: 4"></div>