css圆角水滴制作
使用 CSS 制作圆角水滴效果
圆角水滴形状可以通过 CSS 的 border-radius 和伪元素结合实现。以下是两种常见方法：
基础圆角水滴
通过调整 border-radius 和旋转伪元素实现：
.water-drop {
width: 100px;
height: 100px;
background: #3498db;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
position: relative;
}带尖角的圆角水滴
使用伪元素创建更自然的水滴尖端：
.water-drop {
width: 100px;
height: 100px;
background: #3498db;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
position: relative;
}
.water-drop::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background: #3498db;
border-radius: 50%;
top: -15px;
left: 40px;
}动态水滴效果
添加 CSS 动画让水滴更生动：
@keyframes drop {
0% { transform: rotate(-45deg) scale(1); }
50% { transform: rotate(-45deg) scale(1.1); }
100% { transform: rotate(-45deg) scale(1); }
}
.water-drop {
animation: drop 2s infinite ease-in-out;
}SVG 替代方案
如需更精确控制形状，可使用 SVG：
<svg width="100" height="120" viewBox="0 0 100 120">
<path d="M50 0 Q70 30 50 60 Q30 30 50 0 Z" fill="#3498db"/>
</svg>响应式调整
通过 vw 单位使水滴适应不同屏幕：
.water-drop {
width: 10vw;
height: 10vw;
/* 其他样式保持不变 */
}这些方法可根据具体需求调整颜色、大小和动画效果。SVG 方案适合需要复杂形状的场景，而纯 CSS 方案更适合简单的 UI 元素。
