html - 如何在CSS中制作一个斜椭圆？

Question

我试图在 CSS/HTML 中创建一个斜椭圆，但遇到了一些问题。

我曾尝试创建一个普通的椭圆，然后根据下面的代码将其旋转几度，但它只是旋转了下面的矩形，然后应用了边界半径。

这是我尝试过的:

.circle{
    width:100px;
    height:50px;
    border-radius:50px;
    background:#000;
    -webkit-transform: rotate(27deg);
}

Answer 1

您应该使用相对的 border-radius，并将其设置为 50% 以获得完美的椭圆。

然后，您可以尝试使用 skew 代替:

.circle{
    -webkit-transform: skew(27deg);
}

将呈现:

虽然 rotate 会呈现这个: