CSS 可以很多的 CSS 形狀，比如三角形，圓形等等，但是水滴形狀也是一種比較特別的形狀，下面就來介紹一下如何使用 CSS 實現“水滴”代碼。

.waterdrop {
width: 0;
height: 0;
border-radius: 50%;
border: 20px solid #007bff;
border-bottom-color: transparent;
position: relative;
}
.waterdrop:before {
content: "";
position: absolute;
top: -25px;
left: -25px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 20px solid #00bfff;
transform: rotate(45deg);
}

我們定義一個 class 名稱為 .waterdrop，這個 class 設置了寬度和高度為 0，圓角 as 50%，以及一個 20 像素的描邊。我們接下來通過邊框下部的顏色設置了透明，這樣就實現了水滴形狀。

接下來，我們使用 :before 偽類選擇器，以絕對定位的方式將一個方形的偽元素定位在水滴的頂部。 然后，我們再次將類名指定為 .waterdrop 并將其顏色改為 #00bfff，這樣我們就可以實現了，一個完美的水滴形狀就這樣被我們實現了。