我正在为实践和有趣的架构构建一个响应等距形状（类似于异构体，但基于dom）的scss库。我最想做的形状之一是拱门。以下是我的意思的一个例子：
http://codepen.io/anon/pen/ogqWKY
如你所见，我的拱门只是一面带有透明径向渐变的棱镜：
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中没有简单的方法可以将其应用于三角形形状（因为三角形通常是用边框而不是背景构建的，我不能有选择地将边框图像应用于只有一个边框，同时保持其他边框透明）。
提前谢谢你的帮助！
最佳答案
如果你在四年后找到答案的话。
我建议你在inde arch的div中添加一个div.depth来控制效果。
或者你可以在pesudo元素之后的拱门处添加圆锥梯度。这应该是最终的结果：
背景：径向梯度（底部椭圆，RGBA（25，96，144，0）0%，RGBA（25，96，144，0）60%，196090 60%，19608F 100%），圆锥梯度（从82%89%的141度开始，透明60%，196090 50%）；
它不是完美的，但它是某种东西。