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

Question

Here's a Codepen of what I currently have in my attempt to recreate this shape, and here's what I'm trying to make it look like the image below. I'm not certain how to make the bottom of the box look rounded, and box-radius does not seem sufficient.

I've pasted my mark-up below for posterity.

<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

The basic idea:

2 main shapes, #one to create top-div, just set height and border-radius. and #two has 3 divs to create the side's (.skippy's) and the bubble into the middle to create the bubble..

Set height of #two not more than 2/3 of skippy's and you will be fine.

this is a basic scrats.. don't use it.. use it to create your own :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> 

EDIT (asker ask for more stuff, transparent etc..): you make a holder: set width place 2 divs,#one for top-div, #two to create the bubble...

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

EDIT: prev was not what was asking..

Same for one as always... (basic).. 2 is again a cone but reversed (border-bottom).. #two created the bubble

 #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

You could use a couple of elements for this (I have used three, although I'm sure it's not the most efficient). SVG may also be an option here.

CSS Solution:

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