css上面是椭圆下面是方的

在CSS中，我们可以通过使用<border-radius>来定义元素的圆角。如果我们想要一个上面是椭圆下面是方的形状，该怎么做呢？

首先，我们需要使用<div>标签来创建一个容器，并使用CSS样式来定义它的大小和颜色：

 <style>
    .container {
      width: 200px;
      height: 150px;
      background-color: #f5f5f5;
    }
  </style>

  <div class="container"></div> 

现在我们已经创建了一个椭圆形状的容器。接下来，我们需要使用<div>标签创建一个覆盖在容器上面的元素，并使用<transform>来将其向下旋转45度：

 <style>
    .container {
      width: 200px;
      height: 150px;
      background-color: #f5f5f5;
      border-radius: 100px 100px 0 0;
    }

    .overlay {
      position: relative;
      top: -75px;
      background-color: #ffffff;
      width: 200px;
      height: 75px;
      transform: rotate(45deg);
      transform-origin: 0 0;
    }
  </style>

  <div class="container">
    <div class="overlay"></div>
  </div> 

现在我们已经成功地创建了一个上面是椭圆下面是方的形状！