CSS边框半径问题

Question

有没有人能够向我解释一下如何制作一个像这张图片一样的圆角边框div？

我尝试了，但结果不同：左右两侧的曲线应该更加平滑。

这是我的代码片段：

.cnt {
  margin: 0 auto;
  border: 1px solid grey;
  width: 300px;
  height: 150px;
  position: relative;
  background-color: #4a4d84;
}

.t {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: red;
  bottom: 0;
}

.t::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 70px;
  top:-30px;
  background-color: red;
  border-radius: 50% 50% 0 0;
}

<div class="cnt"> 
  <div class="t">
   
  </div>
</div>

你能帮我吗？

- robb

Answer 1

您希望圆形比父元素更宽，但长宽比相同或类似，同时隐藏溢出。您可以使用单个元素实现此目的。

div {
  width: 400px;
  height: 300px;
  background: blue;
  position: relative;
  overflow: hidden;
}
div:after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translateX(-50%);
  background: red;
  height: 300%; width: 400%;
  border-radius: 50%;
}

<div></div>

- Michael Coker

Answer 2

将 .t 的宽度增加到 200% 并增加更大的边框半径即可达到效果。现在，您可以通过调整其 height 来调整曲线。

.cnt {
  margin: 0 auto;
  border: 1px solid grey;
  width: 300px;
  height: 150px;
  position: relative;
  background-color: #4a4d84;
  overflow: hidden;
}
.t {
  position: absolute;
  width: 200%;
  height: 200px;  /* Change this to adjust the curvature. */
  top: 40%;
  left: -50%;
  background-color: red;
  border-radius: 200%;
}

<div class="cnt">
  <div class="t">

  </div>
</div>

- John Bupit

Answer 3

你可以增加伪元素的宽度（如其他答案所建议），并使用box-shadow来绘制框的上部：

div:before {
  content:'';
  position:absolute;
  top:3em;
  left:-5%;
  right:-5%;
  bottom:0;
  box-shadow:0 0 0 8em turquoise;
  border-radius:100% 100% 0 0%;
  pointer-events : none; /* remove it from the way */
}
div {
  box-sizing:border-box;
  position:relative;
  width:300px;
  margin:auto;
  border:solid;
  font-size:20px;
  padding:5em 1em 1em;
  background:tomato;
  color:white;
  text-align:center;
  font-variant:small-caps;
  overflow:hidden;
}

<div>
  Some text here  
</div>

- G-Cyrillus

Answer 4

使用背景图片的另一种方法：

.main {
  width: 300px;
  height: 200px;
  position: relative;
  /*
  140% is x-axis,
  50% is y-axis,

  at 50% is x-position
  90% is y-position
  */
  background-image: radial-gradient(140% 50% at 50% 90% , #1F8698 0%, #1F8698 50%, #1DC0D6 50%, #1DC0D6 100%)
}

.main::after
{
  content: "Text Here";
  position: absolute;
  bottom: 10%;
  width: 100%;
  text-align: center;
  font-size: 25px;
  color: white;
  
  }

<div class='main'></div>

- Kalimah