水滴是一種非常常見的形狀，它的特點(diǎn)是底部圓潤，向上逐漸變細(xì)，呈現(xiàn)出幾何形的美感。如果需要在網(wǎng)頁上表現(xiàn)出水滴，那么我們可以通過CSS屬性來進(jìn)行實(shí)現(xiàn)。

.waterdrop {
width: 50px;
height: 100px;
background: #0072c6;
border-radius: 50%;
position: relative;
}
.waterdrop::after {
content: "";
position: absolute;
bottom: -50px;
left: 50%;
width: 0;
height: 0;
border-left: 27px solid transparent;
border-right: 27px solid transparent;
border-top: 50px solid #0072c6;
transform: translateX(-50%);
}

上面的代碼中，.waterdrop為水滴的主體部分，在不考慮水滴下方的水滴底座的情況下，我們可以通過設(shè)置它的width、height和border-radius屬性來創(chuàng)造出水滴的外形。可以看到我們設(shè)置了background屬性，這是因?yàn)樗问怯蓄伾模覀冞@里以藍(lán)色為例。

接下來，我們需要創(chuàng)建水滴的下方底座，這個可以通過::after偽元素來實(shí)現(xiàn)。首先，我們把::after設(shè)置為絕對定位，然后通過設(shè)置bottom和left屬性，讓它出現(xiàn)在水滴底部。接著，我們通過設(shè)置三條邊的邊框?qū)挾龋謩e為50px、27px和27px，來構(gòu)建出三角形的形狀。最后，通過設(shè)置border-top的顏色和矩形的背景色一致，來讓水滴和底座融為一體。