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

这是我目前试图重建这个形状的一个例子，这是我试图使它看起来像下图。 我不确定如何使盒子底部看起来圆润，盒子半径似乎不够

我已经把我的标记贴在下面供子孙后代使用

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

13分钟

基本思想：

两个主要形状，一个用于创建顶部div，只需设置高度和边界半径。 和#two有3个div来创建侧面的（.skippy）和中间的气泡来创建气泡

将高度设置为#2，但不要超过skippy高度的2/3，这样你就没事了

这是一个基本的紧急状态。。不要用它。。使用它来创建您自己的：p

#一个{
-webkit边界半径：60px；
-moz边界半径：60px；
边界半径：60px；
高度：200px；
宽度：500px；
背景颜色：粉红色；
}
#两个{
宽度：500px；
高度：100px；
背景颜色：粉红色；
}
.泡泡{
-webkit边界半径：50px；
-moz边界半径：50px；
边界半径：50px；
背景颜色：粉红色；
宽度：100px；
浮动：左；
高度：150像素；
}
.1，
.船长2{
背景色：白色；
宽度：200px；
浮动：左；
高度：150像素；
}
.船长2{
-webkit边框左上半径：100px；
-左上角moz边界半径：100px；
边框左上半径：100px；
}
.船长1{
-webkit边框右上角半径：100px；
-moz边框半径右上角：100px；
边框右上角半径：100px；
}

基本思想：

两个主要形状，一个用于创建顶部div，只需设置高度和边界半径。 和#two有3个div来创建侧面的（.skippy）和中间的气泡来创建气泡

将高度设置为#2，但不要超过skippy高度的2/3，这样你就没事了

这是一个基本的紧急状态。。不要用它。。使用它来创建您自己的：p

#一个{
-webkit边界半径：60px；
-moz边界半径：60px；
边界半径：60px；
高度：200px；
宽度：500px；
背景颜色：粉红色；
}
#两个{
宽度：500px；
高度：100px；
背景颜色：粉红色；
}
.泡泡{
-webkit边界半径：50px；
-moz边界半径：50px；
边界半径：50px；
背景颜色：粉红色；
宽度：100px；
浮动：左；
高度：150像素；
}
.1，
.船长2{
背景色：白色；
宽度：200px；
浮动：左；
高度：150像素；
}
.船长2{
-webkit边框左上半径：100px；
-左上角moz边界半径：100px；
边框左上半径：100px；
}
.船长1{
-webkit边框右上角半径：100px；
-moz边框半径右上角：100px；
边框右上角半径：100px；
}

---

您可以使用几个元素来实现这一点（我已经使用了三个元素，尽管我确信这不是最有效的）。SVG在这里也可能是一个选项

CSS解决方案：

.wrap{
高度：200px；
宽度：80%；
左边距：10%；
背景：浅灰色；
位置：相对位置；
边界半径：10px；
}
A.
.b{
位置：绝对位置；
最高：100%；
左：50%；
宽度：50px；
高度：25px；
转化：translateX（-200%）；
溢出：隐藏；
}
.b{
转化：translateX（100%）；
}
a:以前，
b:以前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
边界半径：0 100%0 0；
框阴影：0 50px浅灰色；
}
b:以前{
边界半径：100%0；
}
.包装：之前{
内容：“；
位置：绝对位置；
最高：100%；
宽度：100px；
背景：继承；
高度：50px；
左：50%；
转化：translateX（-50%）；
边界半径：0.50%50%；
}

---

您可以使用几个元素来实现这一点（我已经使用了三个元素，尽管我确信这不是最有效的）。SVG在这里也可能是一个选项

CSS解决方案：

.wrap{
高度：200px；
宽度：80%；
左边距：10%；
背景：浅灰色；
位置：相对位置；
边界半径：10px；
}
A.
.b{
位置：绝对位置；
最高：100%；
左：50%；
宽度：50px；
高度：25px；
转化：translateX（-200%）；
溢出：隐藏；
}
.b{
转化：translateX（100%）；
}
a:以前，
b:以前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
边界半径：0 100%0 0；
框阴影：0 50px浅灰色；
}
b:以前{
边界半径：100%0；
}
.包装：之前{
内容：“；
位置：绝对位置；
最高：100%；
宽度：100px；
背景：继承；
高度：50px；
左：50%；
转化：translateX（-50%）；
边界半径：0.50%50%；
}

我能为您做些什么。。但是为什么没有图像？为什么没有图像是什么意思？出于好奇，我为您嵌入了图像，为什么是纯HTML/CSS而不是SVG？因为我正在处理/设置插入的HTML，由Mapbox@maximilianlaumeisteri吐出的CSS可以为您做。。但是为什么没有图像？为什么没有图像是什么意思？出于好奇，我为您嵌入了图像，为什么是纯HTML/CSS而不是SVG？因为我正在处理插入的HTML，由Mapbox@MaximillianLaumeister吐出的CSS，我认为这个解决方案的唯一问题是跳过部分是纯白的。如果背景需要显示，或者这是突然出现在某物上，这将不起作用。您没有要求，但这就是为什么图像更好的原因。。让我看看a能否快速解决问题。。我想我知道already@Louis93这是一个基本的。。用它来创建你自己的：）我认为这个解决方案唯一的问题是跳绳是纯白的。如果背景需要显示，或者这是突然出现在某物上，这将不起作用。您没有要求，但这就是为什么图像更好的原因。。让我看看a能否快速解决问题。。我想我知道already@Louis93这是一个基本的。。使用它创建您自己的：）