最佳答案
您可以使用伪元素,例如 ::before
或 ::after
来创建带有 transform
css 属性的倾斜层并绘制背景使用 linear-gradient()
的图像。
.shape {
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index:0;
margin: 0 auto;
color: #fff;
display: flex;
height: 80vh;
width: 80vh;
}
.shape::before {
background: linear-gradient(to top right, maroon 50%, red 50%);
transform: skewX(-20deg);
position: absolute;
z-index: -1;
content: '';
bottom: 0;
right: 0;
left: 0;
top: 0;
}
<div class="shape">Content Goes Here...</div>
引用资料:
关于html - 如何在css中制作具有阴影效果的平行四边形结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54049500/