如何在纯HTML和CSS中创建此形状？

Question

这是我目前在尝试重新创建此形状时所拥有的Codepen，以及我尝试使其看起来如下图所示的内容。 我不确定如何让盒子底部看起来圆润，盒子半径似乎不够。

我已将下面的标记粘贴给后人。

<div id="DIV_1">
<a href="#close" id="A_2">×</a>
<div id="DIV_3">
    <div id="DIV_4">
        <b id="B_5">13</b> min
    </div>
</div>
<div id="DIV_6">
    <div id="DIV_7">
    </div>
</div>

Answer 1

基本理念：

2个主要形状，＃one创建top-div，只设置高度和border-radius。 和#two有3个div来创建边（.skippy's）和泡到中间来创建泡泡..

设置#two的高度不超过skippy的2/3，你会没事的。

这是一个基本的问题..不要使用它..用它来创建你自己的：p

#one {
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 200px;
  width: 500px;
  background-color: pink;
}
#two {
  width: 500px;
  height: 100px;
  background-color: pink;
}
.bubble {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-color: pink;
  width: 100px;
  float: left;
  height: 150px;
}
.skippy1,
.skippy2 {
  background-color: white;
  width: 200px;
  float: left;
  height: 150px;
}
.skippy2 {
  -webkit-border-top-left-radius: 100px;
  -moz-border-radius-topleft: 100px;
  border-top-left-radius: 100px;
}
.skippy1 {
  -webkit-border-top-right-radius: 100px;
  -moz-border-radius-topright: 100px;
  border-top-right-radius: 100px;
}

<div id="one">&nbsp;</div>
<div id="two">
  <div class="skippy1 skippy">&nbsp;</div>
  <div class="bubble">&nbsp;</div>
  <div class="skippy2 skippy">&nbsp;</div>
</div>

编辑（提问者要求更多东西，透明等...）： 你做一个持有人：设置宽度位置2个div，＃top为top-div，#two创建泡泡...

#holder {
  width: 500px;
  background-color: red;
}
#one {
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 200px;
  background-color: pink;
}
#two {
  margin: auto;
  position: relative;
  top: -30px;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid pink;
}

<div id="holder">
  <div id="one">&nbsp;</div>
  <div id="two">&nbsp;</div>
</div>

编辑：上一篇文章不是在问什么......

一如既往......（基本）.. 2再次是一个圆锥但是反转（边框底部）.. #two创建了气泡

#holder {
  width: 500px;
  background-color: red;
}
#one {
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 200px;
  background-color: pink;
}
#two {
  margin: auto;
  position: relative;
  top: -80px;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 100px solid pink;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

<div id="holder">
  <div id="one">&nbsp;</div>
  <div id="two">&nbsp;</div>
</div>

Answer 2

你可以使用几个元素（我已经使用了三个，虽然我确定它不是最有效的）。 SVG也可以作为一种选择。

CSS解决方案：

＆＃13;

＆＃13;

.wrap {
  height: 200px;
  width: 80%;
  margin-left: 10%;
  background: lightgray;
  position: relative;
  border-radius: 10px;
}
.a,
.b {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 50px;
  height: 25px;
  transform: translateX(-200%);
  overflow: hidden;
}
.b {
  transform: translateX(100%);
}
.a:before,
.b:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0 100% 0 0;
  box-shadow: 0 0 0 50px lightgray;
}
.b:before {
  border-radius: 100% 0 0 0;
}
.wrap:before {
  content: "";
  position: absolute;
  top: 100%;
  width: 100px;
  background: inherit;
  height:50px;
  left: 50%;
  transform: translateX(-50%);
  border-radius:0 0 50% 50%;
  
}

＆＃13;

<div class="wrap">
  <span class="a"></span>
  <span class="b"></span>
</div>

＆＃13;

＆＃13;

＆＃13;