我尝试了多种方法，使用线性渐变来创建多个相互叠加的条纹，并且效果非常接近，但似乎卡在了顶面上。我正在尝试使用线性或径向渐变来完成此操作，以便我最终可以将它们升级为重复渐变并拥有漂亮的立方体背景。我正在将 css 应用于一个空的 body 标签。我认为这实际上可能是不可能的，请有人证明我错了!这是我想要的观点:
/ \
|\ /|
| | |
\ /
最佳答案
我使用了 before 和 after 伪元素来获得 3D 立方体效果。这是代码:
<!doctype html>
<html>
<head>
<style>
div {
width:100px;
height:100px;
-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
margin: 20px;
background: red;
}
div::before {
display: block;
content: '';
position: absolute;
width: 71px;
height: 102px;
background: green;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg) translateX(-24px) translateY(96px) skewY(45deg);
}
div::after {
display: block;
content: '';
position: absolute;
width: 72px;
height: 100px;
background: blue;
-webkit-transform: rotateX(0) rotateY(0deg) rotateZ(0deg) translateX(100px) translateY(36px) skewY(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>关于html - 仅使用 CSS 渐变创建立方体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30283296/