css圆角水滴制作

使用CSS创建圆角水滴形状

通过CSS的border-radius属性和伪元素可以制作圆角水滴效果。以下是实现方法：

<div class="water-drop"></div>

.water-drop {
  width: 100px;
  height: 100px;
  background: #3498db;
  border-radius: 50% 0 50% 50%;
  transform: rotate(45deg);
  position: relative;
}

.water-drop::before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background: #3498db;
  border-radius: 50%;
  top: -15px;
  left: 25px;
  transform: rotate(-45deg);
}

使用SVG创建更精确的水滴形状

SVG提供更灵活的路径控制，适合需要精确控制形状的情况：

<svg width="120" height="120" viewBox="0 0 120 120">
  <path d="M60,10 
           C80,10 100,30 100,60 
           C100,90 60,110 60,110 
           C60,110 20,90 20,60 
           C20,30 40,10 60,10Z" 
        fill="#3498db" />
</svg>

添加动画效果增强视觉表现

通过CSS动画让水滴产生下落弹跳效果：

.water-drop {
  animation: drop 2s infinite ease-in-out;
}

@keyframes drop {
  0% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(50px); }
  100% { transform: rotate(45deg) translateY(0); }
}

响应式调整水滴大小

使用vw单位使水滴尺寸随视窗变化：

.water-drop {
  width: 10vw;
  height: 10vw;
  max-width: 150px;
  max-height: 150px;
}

创建彩色渐变水滴

添加CSS渐变背景提升视觉效果：

.water-drop {
  background: linear-gradient(135deg, #3498db, #8e44ad);
}