[分享]css中怎么把椭圆横着放

在CSS中，我们可以使用“transform”属性来控制元素的旋转。而椭圆如果想要横着放，我们可以利用旋转来实现。

.ellipse{
  width: 100px;
  height: 60px;
  border-radius: 50%;
  background-color: #f00;
  transform: rotate(-45deg);
} 

如上代码所示，我们首先定义了一个宽为100px，高为60px的椭圆形。由于椭圆的基本形状是一个圆形，因此我们使用 “border-radius: 50%” 设定边框半径为50%。接着，我们使用“background-color”属性来控制椭圆的颜色。

接下来，就是利用“transform”属性来旋转椭圆。属性值为“rotate(-45deg)”，其中“rotate”表示旋转，而“-45deg”表示旋转的角度为负45度。这样就能将原本竖直的椭圆给横过来。

需要注意的是，当我们旋转一个元素之后，它的位置也会发生改变。因此，可以使用“translate”属性来进行调整。

.ellipse{
  width: 100px;
  height: 60px;
  border-radius: 50%;
  background-color: #f00;
  transform: rotate(-45deg) translate(-40px, 40px);
} 

如上代码所示，我们使用“translate(-40px, 40px)”将椭圆向左上方移动40px的距离。这样，就能使椭圆的位置不发生改变，保持其在原来的位置上。

以上就是关于如何通过CSS让椭圆横着放的实现方法了。