logo标签列表

使用border-radius创建CSS拱门是否可行？

htmlcsscss-shapes
8
我正在尝试仅使用CSS创建拱形。我查看了各种“插入边框半径”问题，但它们都只显示如何插入角，而不是对象的中间部分。
我正在寻找一种方法来反转对象的中间部分，以创建类似桥梁的拱形。
附带的示例图像显示了我要实现的类型。
编辑：
这个拱形的一个重要部分是它将放置在其他对象上方。简单地抠掉它不是解决方案，而只是一个临时的hack。请参见下面的图像。

enter image description here

当然，如果您只想要上面的图像，那是可能的。但是，如果没有看到您的代码，很难说我们可以/不能使用什么来创建它。 - Huangism
嗨@Huangism。除了一个需要转换成拱形的带有背景颜色的正方形div之外，我还没有任何代码！不过，我已经为您创建了一个JSfiddle供您查看。http://jsfiddle.net/Lw53uxf5/ - alex
1
是的，这绝对是可能的，就像这样使用伪元素并为其分配一个border-radius。 - Harry
1
仅仅添加一个白色背景并不能解决问题。请查看这个JSFiddle，其中白色遮盖了下面的内容，以及我在原始问题中更新的图像。http://jsfiddle.net/m9rnjqxr/ - alex
1
是的，我意识到了我的错误。通常只有当其他人开始质疑我时，我的真正需求才会浮出水面！下一次我会从一开始就包括所有内容。无论如何，感谢您的帮助 :) - alex
显示剩余2条评论
5个回答
10

您可以使用径向渐变来完成。我已经在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语法。根据所需的浏览器支持程度，您还需要添加旧版本。

很好！猫占位符用得很不错。我会试一下看看效果如何！顺便说一下，记得加分哦。 - alex
没问题。这是一种相当灵活的技术。我正在使用一个正方形容器来创建渐变，但如果您想要不同的弧度，可以尝试调整椭圆的高度。 - Robin Whittleton
我很高兴你提到了那个。我的意思是，我本来就打算尝试一下，但你还是指出了它，这表明了你对这个解决方案的真正理解 :) - alex
1
@pappy 我正在研究类似的方法。正如Robin所指出的那样，如果我再重复一遍径向渐变的答案，那就没有意义了。不过你可能想看看这个演示 http://jsfiddle.net/hashem/jkfrkoez/ ，它也许能满足你的需求。 - Hashem Qolami
3

根据您发布的图片，您可以考虑采用另一种方法，例如：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 { border-top-left-radius: 50% 100px; border-top-right-radius: 50% 100px; } - BigDru
2
使用box-shadow的另一种解决方法
.overlay::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    top: 30px;
    border-radius: 50%;
    box-shadow: 0px -100px 0px 72px red;
 }

这里是Robin的代码，我们进行了复用 :-)

1

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/

1
不错的尝试，但不是我要找的。通过在矩形上放置一个白色的“蛋”，它只创造了我需要的幻象，而不是功能。我计划将此拱门放置在各种页面和图像的顶部，因此确实需要剪裁。请参见附带的图像以获取更多信息。http://i.imgur.com/BdE9UPf.jpg - alex
1
你可以这样做：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>
1
不错的尝试，但它对我的下面的对象没有帮助。看一下这个JSFiddle，注意.arch:after中的白色是如何简单地覆盖绿色的.otherObjects，使整个练习变得毫无意义！http://jsfiddle.net/m9rnjqxr/ - alex
这很容易处理。例如：.otherObjects {position: relative; z-index: 100;} - ralph.m
不，这不容易处理。http://jsfiddle.net/4vcj0z0r/ 如果您切换 .otherObjects 的 z-index，您将看到它在白色拱门的前面和后面之间切换。在任何时候，它都不会位于 .arch 和 .arch:after 之间。这是因为 z-index 是从父级继承的。没有办法使用 CSS 将它们分开。检查此 JSFiddle 上的元素，您将看到问题。http://jsfiddle.net/4vcj0z0r/ - alex
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接