Question

我尝试使用CSS创建拱门。我已经调查了各种各样的＆＃34; inset border-radius＆＃34;问题，但所有这些问题都展示了如何嵌入角落，而不是对象的中间部分。

我正在寻找一种方法来反转物体的中间以创建像桥梁一样的拱门。

包含一个示例图像，以显示我试图实现的那种东西。 enter image description here

编辑：

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

enter image description here

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语法。您需要根据所需浏览器支持的回溯程度添加旧版本。

Answer 2

根据您发布的图片，您可以考虑采用另一种方法，例如：http://codepen.io/pageaffairs/pen/lpLHg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {background: red; padding-top: 100px; width: 400px; text-align: center; overflow: hidden;}
img {border-radius: 200px/30px ; display: block; margin: 0 0 -30px -10px;}

</style>
</head>
<body>

<div>
    <img src="http://placeimg.com/420/420/any">
</div>

</body>
</html>

Answer 3

另一种解决方法，使用box-shadow

.overlay::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    top: 30px;
    border-radius: 50%;
    box-shadow: 0px -100px 0px 72px red;
 }

fiddle

重复使用罗宾小提琴： - ）

Answer 4

Html：

<div class="wrapper">
   <div class="rectangle"></div>
   <div class="egg"></div>
</div>

CSS：

.wrapper {
  width:200px;
  height:100px;
  overflow:hidden;
  position:relative;
}
.rectangle{
  width:200px;
  height:100px;
  background-color:red;
}
.egg {
  width:200px;
  height:100px;
  border-radius:50%;
  background-color:#fff;
  position:absolute;
  top:56px;
}

和小提琴： http://jsfiddle.net/h1gjefk7/

Answer 5

你可以这样做：http://codepen.io/pageaffairs/pen/wpaFm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div { 
    width: 230px;
    height: 120px;
    background: red;
    position: relative;
    overflow: hidden;
}
div:after {
    content:"";
    width: 260px;
    height: 50px;
    background: #fff;
    border-radius: 100% 100% 0 0;
    position: absolute;
    bottom:0;
    left: -15px;
}

</style>
</head>
<body>

<div></div>

</body>
</html>

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

5 个答案: