纯 CSS 中的等距拱形答案

【问题标题】：Isometric arch shape in pure CSS纯 CSS 中的等距拱形
【发布时间】：2015-04-19 23:13:34
【问题描述】：

我正在构建一个响应式等距形状的小型 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 中没有简单的方法将其应用于三角形（因为三角形通常是用边框，而不是背景，我不能选择性地将边框图像应用到一个边框，同时保持其他边框透明）。

提前感谢您的帮助！

【问题讨论】：

标签： html css css-shapes isometric

【解决方案1】：

我建议你在拱门的 div 中添加一个 div.depth 来控制效果。

或者你可以在伪元素之后的拱形处添加圆锥渐变。
这应该是最终结果：

<strong>background</strong>: radial-gradient(ellipse at bottom, rgba(25, 96, 144, 0) 0%, rgba(25, 96, 144, 0) 60%, #196090 60%, #19608F 100%), conic-gradient(from 141deg at 82% 89%, transparent 60%, #196090 50%);

它并不完美，但它是¯_(ツ)_/¯

【讨论】：