文章/答案/技术大牛

发布

社区首页 >问答首页 >用纯CSS绘制超椭圆

问用纯CSS绘制超椭圆
EN

Stack Overflow用户

提问于 2014-09-24 18:03:34

回答 2查看 2.8K关注 0票数 5

正如标题所说:如何使用纯CSS绘制超椭圆(具体地说，苹果iOS7 /8)？我不太确定这是否可能，但仍然如此。

参考图像：

css

回答 2

Stack Overflow用户

发布于 2014-10-21 11:40:38

这并不准确，但你也许能够调整这个想法，得到一些你可以接受的东西。基本上，您可以将具有椭圆边框的::before和::after伪元素层叠在具有圆形边框的包含元素之下，以获得效果。

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

将鼠标悬停在代码段中的元素上可查看组合节。

div {
    width:180px;
    height:180px;
    border-radius:20%/20%;
    background-color:lightblue;
    position:relative;
}

div::before, div::after {
    content:'';
    position:absolute;
    z-index:-1;
}

div::before {
    border-radius: 2%/30%;
    background-color: blue;
    top: 30px;
    bottom: 30px;
    right: -2px;
    left: -2px;
}

div::after {
    border-radius: 30%/2%;
    background-color: green;
    left: 30px;
    right: 30px;
    top: -2px;
    bottom: -2px;
}

div:hover,
div:hover::before,
div:hover::after {
    background-color:#ff4949
}

<div></div>

票数 8

Stack Overflow用户

发布于 2021-03-31 04:01:36

我们可以使用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胡迪尼怎么样？

现在我们可以使用CSS Houdini提供的CSS Paint API了。我们将使用一个名为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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26014105

复制

相似问题

问用纯CSS绘制超椭圆
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用纯CSS绘制超椭圆EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用纯CSS绘制超椭圆
EN