当前位置：首页 > CSS

css圆角水滴制作

2026-01-28 12:41:01CSS

CSS圆角水滴制作

通过CSS可以轻松创建圆角水滴效果，结合border-radius和伪元素实现。

基础水滴形状

css圆角水滴制作

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

添加水滴尖端 使用::after伪元素创建水滴底部的尖端效果：

.water-drop::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background: #3498db;
  border-radius: 50%;
  bottom: -15px;
  left: 35px;
}

完整实现代码

css圆角水滴制作

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

  .water-drop::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: #3498db;
    border-radius: 50%;
    bottom: -15px;
    left: 35px;
  }
</style>

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

进阶效果 添加渐变和阴影增强立体感：

.water-drop {
  background: linear-gradient(to bottom right, #3498db, #2980b9);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

动画效果 让水滴产生下落动画：

@keyframes drop {
  0% { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(0.8); }
  100% { transform: rotate(-45deg) scale(1); }
}

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

通过调整border-radius的百分比值可以改变水滴的圆润程度，修改颜色和尺寸可适应不同设计需求。