可以使用边框半径的 CSS Arch 吗？答案

【问题标题】：Is a CSS Arch using border-radius possible?可以使用边框半径的 CSS Arch 吗？
【发布时间】：2014-08-26 02:07:42
【问题描述】：

我正在尝试仅使用 CSS 创建一个拱门。我研究了各种“inset border-radius”问题，但它们都显示了如何插入角，而不是对象的中间部分。

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

包括一个示例图像，以显示我正在尝试实现的目标。

编辑：

这个拱门的一个重要部分是它将被放置在其他对象之上。简单地将其剔除不是解决方案，而只是暂时的破解。有关更多信息，请参见下图。

【问题讨论】：

如果您只想要上面的图像，当然可以。但是，如果没有看到您的代码，很难说我们可以/不能使用什么来创建它
嗨@Huangism。我还没有任何代码，除了一个带有背景颜色的方形 div，我需要把它变成一个拱形！无论如何，我已经创建了一个 JSfiddle 供您查看。 jsfiddle.net/Lw53uxf5
是的，这绝对是可能的，就像this 使用伪元素并为其分配边框半径。
简单地添加白色背景并没有帮助。请参阅此 JSFiddle，其中白色覆盖了下面的内容，以及我对原始问题的更新图像。 jsfiddle.net/m9rnjqxr
是的，我意识到我的错误。通常只有当其他人开始质疑我时，我的真正需求才会出现！下次我将从头开始包含所有内容。无论如何感谢您的帮助:)

标签： html css css-shapes

【解决方案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 语法。您需要添加旧版本，具体取决于您所需的浏览器支持有多远。

【讨论】：

不错！并很好地使用了 kitty 占位符。我会试试这个，看看效果如何！ ps有道理。
没有问题。这是一种相当灵活的技术。我使用方形容器作为渐变，但如果您想要不同的弧线，您可以尝试调整不同椭圆的高度。
我很高兴你提到了这一点。我的意思是，无论如何我都会尝试它，但无论如何你指出的事实表明你对这个解决方案的真正理解:)
@pappy 我正在研究类似的方法。由于罗宾已经指出径向梯度，我重复的答案将毫无意义。但是，您可能想看看这个演示 jsfiddle.net/hashem/jkfrkoez，它可能会满足您的需求。

【解决方案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>

【讨论】：

如果我们执行 div { width: 420px; } 和 img { 边界左上角半径：50% 100px;边框右上角半径：50% 100px； }

【解决方案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

重用 Robin fiddle :-)

【讨论】：

【解决方案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/

【讨论】：

不错的尝试，但不是我想要的。通过在矩形上放置一个白色的“鸡蛋”，它只会产生我需要的错觉，而不是功能。我计划在各种页面和图像上放置这个 Arch，所以它确实需要被剪掉。有关更多信息，请参见包含的图像。 i.imgur.com/BdE9UPf.jpg

【解决方案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>

【讨论】：

很好的尝试，但它对我下面的对象没有帮助。看看这个 JSFiddle 并注意 .arch:after 中的白色是如何简单地掩盖了绿色的 .otherObjects 使整个练习变得毫无意义！ jsfiddle.net/m9rnjqxr
不过，这很容易处理。例如。 .otherObjects {position: relative; z-index: 100;}
不，这不容易处理。 jsfiddle.net/4vcj0z0r 如果您切换 .otherObjects 的 z-index，您将看到白色拱门前面和后面之间的切换。它绝不会介于 .arch 和 .arch:after 之间。这是因为 z-indexes 是从父母那里继承而来的。没有办法使用 CSS 将它们分开。检查此 JSFiddle 上的元素，您会发现问题。 jsfiddle.net/4vcj0z0r