css上下尖角椭圆怎么画

在CSS中，我们可以利用一些技巧来实现上下尖角椭圆的绘制，接下来我将会讲解其中的一些方法。

.elliptical-shape {
  width: 100px;
  height: 40px;
  border-radius: 50% / 100%;
  position: relative;
  overflow: hidden;
}

.elliptical-shape:before, .elliptical-shape:after {
  content: "";
  width: 100%;
  height: 150%;
  position: absolute;
  left: 0;
  transform-origin: center bottom;
  background: #3d72b4;
}

.elliptical-shape:before {
  top: 0;
  transform: skew(-45deg);
}

.elliptical-shape:after {
  top: 30%;
  transform: skew(45deg);
} 

首先，我们创建一个div元素，为其添加一个宽度、高度和圆角属性。这个div将作为容器来显示我们的上下尖角椭圆。接着，我们在div元素中创建两个伪元素:before和:after，并且设置它们的样式。这两个伪元素将作为上下的两个尖角。

伪元素的宽度被设置为100%，高度设置为150%。这是为了保证它们能够完美的覆盖住我们的div元素，并且在实现上下尖角的时候能够完全显示。

:before伪元素设置为顶部尖角。我们通过设置transform: skew(-45deg)来实现一个上斜角度。同时，利用transform-origin: center bottom来设置变换基点。这样就可以完美显示上斜角度，形成上尖的效果。

:after伪元素设置为底部尖角。我们通过设置transform: skew(45deg)来实现一个下斜角度。同时，也设置了它的transform-origin为center bottom。这样就可以完美的显示下斜角度，形成下尖的效果。

最终我们得到了一个漂亮的上下尖角椭圆的设计。你可以通过修改div元素的宽度和高度以及伪元素的尺寸、颜色等属性来实现自己想要的效果。