如何在纯 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 创建顶部-div，只需设置高度和边框半径。 #two 有 3 divs 来创建侧面的 (.skippy) 和气泡到中间来创建气泡..

将#two 的高度设置为不超过 skippy 的 2/3 就可以了。

这是一个基本的 scrats.. 不要使用它.. 用它来创建你自己的 :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 divs，#one 用于顶部-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>

编辑：prev 不是要问的..

一如既往...（基本）.. 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 解法：

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

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

如何在纯 HTML 和 CSS 中制作此形状？

How do I make this shape in pure HTML and CSS?

html

css

css-shapes