css 制作水滴形状 |css样式通配选择器

.droplet {
position: relative;
width: 40px;
height: 60px;
border-radius: 20px / 30px;
border: 2px solid #000;
background-color: #00F;
}
.droplet::before {
content: "";
position: absolute;
bottom: -30px;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 30px solid #00F;
}

上面的代码中，第一个选择器 “.droplet” 设置了水滴形状的基本样式，包括宽度、高度、边框颜色和背景颜色。其中的 border-radius 属性是关键，它使得水滴的上半部分呈圆形，下半部分呈圆锥形。

接着，偶使用了 ::before 伪元素来制作水滴的下半部分。在 ::before 中，偶设置了位置、大小和边框宽度和颜色，使其呈现出三角形的形状，并且与水滴的上半部分颜色一致，从而形成了完整的水滴形状。

以上就是使用 CSS 制作水滴形状的方法，这种形状在一些特殊的场合中可以有用，比如制作气泡、液滴等。需要注意的是，border-radius 属性和伪元素的尺寸和位置需要根据实际需求进行调整，以达到最佳的效果。