css上下尖角椭圆如何画

# CSS上下尖角椭圆如何画

在CSS中创建带有上下尖角的椭圆（或称为"胶囊形带尖角"形状）是一个有趣的视觉挑战。这种形状常见于对话框、工具提示或装饰性元素中。下面将详细介绍5种实现方法，从基础到进阶逐步讲解。

## 方法一：伪元素+旋转矩形（最常用）

```css
.ellipse-point {
  width: 200px;
  height: 100px;
  background: #4CAF50;
  border-radius: 50px;
  position: relative;
}

.ellipse-point::before,
.ellipse-point::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  left: 50%;
}

.ellipse-point::before {
  top: -10px;
  transform: translateX(-50%) rotate(45deg);
}

.ellipse-point::after {
  bottom: -10px;
  transform: translateX(-50%) rotate(45deg);
}

原理分析： 1. 主元素使用border-radius: 50%创建椭圆 2. 伪元素通过旋转正方形形成45度菱形 3. 精确定位实现上下尖角效果

方法二：clip-path多边形裁剪

.ellipse-clip {
  width: 200px;
  height: 120px;
  background: #FF5722;
  clip-path: polygon(
    0% 30%, 
    10% 0%, 
    90% 0%, 
    100% 30%,
    100% 70%,
    90% 100%,
    10% 100%,
    0% 70%
  );
}

特点： - 通过8个控制点定义形状 - 百分比值可调整尖角锐度 - 兼容性注意：部分旧浏览器需加-webkit-前缀

方法三：border+伪元素组合

.triangle-ellipse {
  width: 180px;
  height: 80px;
  background: #9C27B0;
  border-radius: 40px;
  position: relative;
}

.triangle-ellipse::before {
  content: '';
  position: absolute;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #9C27B0;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.triangle-ellipse::after {
  /* 类似样式创建下方尖角 */
}

方法四：SVG内联方案

<div class="svg-container">
  <svg viewBox="0 0 200 120">
    <path d="M20,60 Q0,30 20,0 H180 Q200,30 180,60 Q200,90 180,120 H20 Q0,90 20,60 Z" 
          fill="#2196F3"/>
  </svg>
</div>

SVG优势： - 矢量图形完美缩放 - 贝塞尔曲线实现平滑过渡 - 可通过CSS控制SVG样式

方法五：CSS渐变模拟（最复杂）

.gradient-ellipse {
  width: 200px;
  height: 120px;
  position: relative;
  background: 
    radial-gradient(ellipse at center, #00BCD4 0%, #00BCD4 70%, transparent 71%),
    linear-gradient(135deg, transparent 48%, #00BCD4 49%, #00BCD4 51%, transparent 52%) top center,
    linear-gradient(-135deg, transparent 48%, #00BCD4 49%, #00BCD4 51%, transparent 52%) bottom center;
  background-size: 100% 100%, 30px 30px, 30px 30px;
  background-repeat: no-repeat;
}

响应式适配技巧

所有方案都需要考虑不同屏幕尺寸下的表现：

/* 基础响应式 */
.ellipse-point {
  width: 80%;
  max-width: 300px;
  height: 0;
  padding-bottom: 40%; /* 保持宽高比 */
}

/* 媒体查询调整细节 */
@media (max-width: 600px) {
  .ellipse-point::before,
  .ellipse-point::after {
    width: 15px;
    height: 15px;
  }
}

实际应用增强

1. 添加阴影效果：

   .ellipse-point {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
   }
   

2. 动画效果：

   @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
   }
   .animated-ellipse {
    animation: pulse 2s infinite;
   }
   

浏览器兼容性对比

结语

选择哪种实现方式取决于： - 项目浏览器兼容要求 - 是否需要动态修改形状 - 性能考虑（CSS方案通常比SVG更轻量）

建议从伪元素方案开始尝试，它是平衡兼容性和灵活性的最佳选择。对于需要复杂交互的场景，SVG方案可能更合适。 “`