Question

我在这里添加了2张图片。您可以看到第一条曲线是向下曲线，第二条曲线是向上曲线。

现在，我有一个使用CSS的矩形框。我要使顶部和底部边框应该像图片一样。

我可以使用CSS border-radius属性制作边框曲线。但是我不明白如何使用CSS3制作这种类型的边界曲线？

已更新：

这是我想要的完整输出：

Answer 1

您可以使用两个带黑色背景的Divs和带白色背景和圆角边框的孩子来实现此目的。包装器应具有填充物以模拟边框厚度：

#wrapper{
background:#000000;
width:600px;
height:200px;
padding:10px;
}
#roundCurve{
background:#ffffff;
width:600px;
height:200px;
border-bottom-left-radius:50% 50px;
border-bottom-right-radius:50% 50px;
border-top-left-radius:50% 50px;
border-top-right-radius:50% 50px;
}

<div id="wrapper">
<div id="roundCurve"></div>
</div>

Answer 2

我使用before after实现了这一目标

div{
  width: 400px;
  height: 200px;
  background-color: #333;
  position: relative;
  overflow: hidden;
}
div:before {
    content: "";
    position: absolute;
    top: -10%;
    width: 100%;
    height: 50%;
    background-color: white;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}
div:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: -10%;
    height: 50%;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

<div></div>

更新 OP最近发表评论后，您可以在content-main div

中添加内容

.content{
  background-color: #333;
  width: 400px;
}
.content-top, .content-bottom{
  width: 400px;
  height: 100px;
  background-color: #333;
  position: relative;
  overflow: hidden;
}
.content-top:before {
    content: "";
    position: absolute;
    top: -10%;
    width: 100%;
    height: 50%;
    background-color: white;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}
.content-bottom:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: -10%;
    height: 50%;
    background-color: white;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}
.content-main{
  padding: 10px;
}

<div class="content">
  
  <div class="content-top"></div>
  <div class="content-main">

    <h1>Cat</h1>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS11TbGOYA0EmL-usNpArFE8o17OSRSilYYohX1lgyxaP43M2Pt">


  </div>
  <div class="content-bottom"></div>
  
</div>

Answer 3

以下是您可以遵循的示例：

body {
  background: black;
}
.roundCorner {
  width: 150px;
  height: 100px;
  padding: 2em;
  border-bottom: 0;
  position: relative;
  background: white;
  border-radius: 1em 1em 0 0;
}
.roundCorner:before {
  position: absolute;
  left: -1px;
  right: -1px;
  top: 0;
  height: 1.5em;
  border: 1px solid black;
  border-top: 0;
  border-radius: 0 0 3em 3em;
  content:'';
  background: black;
}
.roundCorner:after {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 0;
  height: 1.5em;
  border: 1px solid black;
  border-bottom: 0;
  border-radius: 3em 3em 0 0;
  content: '';
  background: black;
}

<div class="roundCorner"></div>

您可以更改body，.roundCorner，.roundCorner:before，.roundCorner:after的背景以查看其工作原理。

如何使用CSS3制作曲线边框？

3 个答案: