css上下尖角椭圆怎么画

1. 前言

在网页设计中，有时候需要用到上下尖角椭圆，它可以被用作各种设计元素，比如按钮、标签、背景等等。下面我们来看看如何用CSS来画上下尖角椭圆。

2. 画上尖角椭圆

2.1 利用 border 和 transform

我们可以先画一个正方形，然后利用 border 和 transform 来使其变成菱形，接着再借助 border-radius 和 clip-path 来画出上尖角椭圆的效果。

/*HTML
<div class="triangle-up"></div>
*/
/*CSS*/
.triangle-up {
  width: 100px;
  height: 100px;
  background-color: #9c27b0;
  border: 1px solid #fff;
  transform: rotate(-45deg);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  border-radius: 15px 15px 0px 0px;
}

上述代码中，我们首先创建了一个 100x100 的正方形，然后通过 transform：rotate(-45deg); 把它旋转了 45 度，变成了一个菱形。紧接着我们利用 clip-path 属性设置了一个多边形，就可以定义出了这个上尖角椭圆的形状了。最后我们设置了四个如图所示的 border-radius，并分别给它们命名。

2.2 利用伪元素

除了上面的方法之外，还可以利用伪元素来绘画出上尖角椭圆。

/*HTML
<div class="triangle-up-2"></div>
*/
/*CSS*/
.triangle-up-2{
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #9c27b0;
}
.triangle-up-2:before {
  content: "";
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #9c27b0;
  position: absolute; 
  top: -50px;
  left: 0;
}

在这段代码中，我们还是先创建了一个正方形，但是它的高度只设置为了 50px。通过设置伪元素的 border 来绘制出上尖角椭圆，也就是利用了 border-left 和 border-right 的宽度是 0，border-bottom 的宽度为 50px 的原理。

3. 画下尖角椭圆

3.1 利用 border 和 transform

与上尖角椭圆类似，我们可以利用 border 和 transform 先把正方形变成菱形，然后用 clip-path 属性来定义下尖角椭圆的形状。

/*HTML
<div class="triangle-down"></div>
*/
/*CSS*/
.triangle-down {
  width: 100px;
  height: 100px;
  background-color: #9c27b0;
  border: 1px solid #fff;
  transform: rotate(135deg);
  clip-path: polygon(0 50%, 50% 100%, 100% 50%, 50% 0);
  border-radius: 0px 0px 15px 15px;
}

在这段代码中，我们先利用 transform: rotate(135deg); 把正方形变成了菱形，接着利用 clip-path 定义多边形来设置下尖角椭圆的形状，最后我们同样设置了四个 border-radius。

3.2 利用伪元素

下尖角椭圆也可以用伪元素来绘制出来。

/*HTML
<div class="triangle-down-2"></div>
*/
/*CSS*/
.triangle-down-2 {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #9c27b0;
}
.triangle-down-2:after {
  content: "";
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid #9c27b0;
  position: absolute; 
  bottom: -50px;
  left: 0;
}

这段代码与上尖角椭圆的代码相似，我们还是先创建一个正方形，但是它的高度仍然被设置为了 50px。接着通过添加伪元素并设置 border 来绘画出下尖角椭圆的效果。

4. 总结

通过以上的两种方法，我们可以很容易地画出上下尖角椭圆。其中第一种方法更加灵活，可以根据实际需求来自由地调整菱形角度或是椭圆形状。而第二种方法则相对简单一些，只需要添加一个伪元素就可以了。