如何在纯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用来创建顶级，只设置高度和边界半径。 #two具有3个div来创建侧面（.skippy），并在中间插入气泡以创建气泡。

将#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设置为上格，＃2来创建气泡...

 #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解决方案：

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