如何在純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>