Question

我正在构建一个响应等距形状的SCSS库（有点像IsomerJS，但基于DOM），用于练习和有趣的架构。我真正喜欢的形状之一是拱形。这是我的意思的一个例子：

正如你所看到的，我的拱门只是一个透明径向渐变的棱镜：

background: radial-gradient(ellipse at bottom, rgba(darken($color, 20%), 0) 0%, rgba(darken($color, 20%), 0) 60%, rgba(darken($color, 20%), 1) 60%, rgba(darken($color, 20%), 1) 100%);

到目前为止，它在Webkit中运行良好。我在那里大约80％，但如果你看一下，这个洞看起来有点......平坦。如何在洞中添加一些深度错觉？我尝试了多个径向渐变，但我无法找到一种方法来抵消内部渐变以形成类似3d的幻觉。有什么想法吗？

在我问的时候，我也想问一下是否有人可以给我一个锥形。金字塔很容易（两个三角形围绕一个正方形旋转60度），就像一个圆柱体（“管”只是一个矩形，一端是边界半径，深度是水平线性梯度）。我开始用this作为一个圆锥，但它确实需要一个渐变来给出深度的幻觉，据我所知，没有简单的方法将它应用于纯CSS中的三角形形状（因为三角形通常是用边框而不是背景构建，我不能有选择地将边框图像应用于一个边框，同时保持其他边框透明）。

提前感谢您的帮助！

Answer 1

Idk，如果您在将近四年后仍未找到答案。我建议您添加一个div.depth insinde arch的div来控制效果。

或者您可以在pesudo元素后的arch处添加圆锥曲线。
这应该是最终结果：
背景：径向渐变（底部椭圆，rgba（25，96，144，0）0％，rgba（25，96，144，0）60％，＃196090 60％，＃19608F 100％），圆锥曲线（从141度开始，在82％，89％，透明60％，＃196090 50％）；

这不是完美的，但它是¯_（ツ）_ /¯

纯CSS中的等距拱形

1 个答案: