Question

尝试围绕内容区域构建三维立方体效果。多维数据集效果与::before，::after和-webkit-transform:skew一起正常工作，但我无法让右侧继承其父级的高度，迫使我使用静态高度，我不这样做想做。有没有更好的方法来实现这一点，因为默认高度没有设置，因为内容会持续更多/更少和影响大小？

下面的JS小提琴，HTML格式化了一点简化。

http://jsfiddle.net/pm9h5/

Answer 1

您绝对可以将:after伪元素相对于父.cube定位，并使用100%的高度来获取父级的高度。

使用此方法，3D阴影效果应适用于不同尺寸的动态内容。

UPDATED EXAMPLE HERE

将position:relative添加到父级：

.cube {
    content:'';
    background-color: hsl(0, 0%, 100%);
    margin-left:-15px;
    margin-right: -15px;
    position:relative;
}

将position:absolute和height:100%添加到:before：

.cube::before {
    content:'';
    width: 35px;
    height: 100%;
    position: absolute;
    display: block;
    float: right;
    bottom: 0;
    right: -35px;
    background-color: hsl(0, 0%, 75%);
    -webkit-transform: skewY(45deg);
    -webkit-transform-origin: top left;
}

未设置时的相对位置继承

1 个答案: