css - 制作一个笨拙的 div 形状

Question

我想知道是否可以使用类似于以下的 div 制作复杂的形状:

它基本上是一个四 Angular 向内收缩的圆 Angular 正方形。目标是使用背景图像来填充它。我可以使用具有以下 SVG 路径的剪辑蒙版来完成它:

<path id="Path_1386" data-name="Path 1386" d="M20.148,599.906,455.922,482.262a15.989,15.989,0,0,0,11.817-15.433V139.242a15.986,15.986,0,0,0-11.632-15.381L20.335.613A15.984,15.984,0,0,0,0,15.994V584.475a15.983,15.983,0,0,0,20.148,15.431" transform="translate(0 0)" />

但是在 CSS 中使用它来响应式调整大小有点尴尬。

Answer 1

选项 1(转换)

使用 transform: perspective() 和 tranfrom: rotateY()。

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 20px 0 0 20px;
    transform: perspective(300px) rotateY(10deg);
    width: 300px;
}

<div id="box"></div>

Example on Jsfiddle

选项 1.1

使用transform: matrix3d() .您可以使用 generator here

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 50px 0 0 50px;
    transform: matrix3d(0.98,0,0.17,.0005,0.00,1,0.00,0,-0.17,0,0.98,0,0,0,0,1);
    width: 300px;
}

<div id="box"></div>

Example on Jsfiddle

---

选项 2(perspective with transform)

使用 perspective 和 transform: rotateY()。您可以使用此选项 perspective-origin指向位置。

#perspective-box {
    perspective: 400px;
    perspective-origin: left;
}

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 20px 0 0 20px;
    transform-style: preserve-3d;
    transform: rotateY(15deg);
    width: 300px;
}

<div id="perspective-box">
    <div id="box"></div>
</div>

Example on Jsfiddle

选项 2.1

使用透视 transform: rotate3D() .

#perspective-box {
    perspective: 700px;
}

#box {
    background-color: #f00;
    border-radius: 40px;
    height: 300px;
    margin: 50px 0 0 50px;
    transform: rotate3D(0, 1, 0, 30deg);
    width: 300px;
}

<div id="perspective-box">
    <div id="box"></div>
</div>

Example on Jsfiddle