CSS Border Radius问题

Question

任何人都可以解释我如何制作圆形边框div this image？

我试过但结果却不一样：左侧和右侧曲线应该不那么硬。

这是我的代码段：

.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>

你能帮助我吗？

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>

Answer 2

将.t的宽度增加到200%并具有更大的边框半径就可以了。您现在可以更改其height以调整曲线。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

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>

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>