是否可以使用border-radius的CSS Arch？

Question

我正在尝试使用CSS创建一个拱门.我已经研究了各种" 插入边界半径 "问题,但它们都展示了如何嵌入角落,而不是对象的中间部分.

我正在寻找一种方法来反转对象的中间以创建像桥梁一样的拱形.

其中包括一个示例图像,以显示我正在尝试实现的那种事情.

编辑:

这个拱门的一个重要部分是它将被放置在其他对象上.简单地说出来并不是一个解决方案,而只是一个临时的黑客攻击.有关详细信息,请参见下图.

Answer 1

你可以用径向渐变来完成.我在JSFiddle上做了一个例子:http://jsfiddle.net/17ohey9h/

基本的想法是有一个大的叠加(生成的内容夹在容器上overflow: hidden),然后给它一个径向渐变的背景,并有一个硬停止过渡.我们可以通过在同一位置设置两个停靠点来实现此目的,但是具有相反的半透明度:

radial-gradient(ellipse at center, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%)

你可以明显地使用颜色和位置来玩,一般的想法成立.我也只为此提供了W3C语法.您需要根据所需浏览器支持的回溯程度添加旧版本.