使用CSS3构建一个框

Question

我想用CSS3构建一个盒子。尺寸应以百分比给出。如何计算偏斜为45度的盒子部分的位置和尺寸的正确值。不知何故，零件不合适，零件重叠，短或太长。

jsFiddle

HTML

<div class="wrap">
    <div class="back"></div>
    <div class="front"></div>
</div>

CSS

.wrap {
    margin:100px;
    width: 400px;
    height:1600px;
    position: relative;
}
.back {
    position: absolute;
    left:0%;
    width: 100%;
    height: 100%;
    background: red;
}
.back:before {
    content:"";
    position: absolute;
    width:25%;
    height:100%;
    left:-24%;
    top: 3%;
    background:black;
    transform: skew(0, -45deg);
}
.back:after {
    content:"";
    position: absolute;
    width:100%;
    height:6%;
    left:-12%;
    top: 0%;
    background:rgba(111, 111, 255, 0.6);
    transform: skew(-45deg);
}

Answer 1

你的意思是这样的吗？

http://jsfiddle.net/ZqpZ7/7/

.back:before{
    content:"";
    position: absolute;
    width:25%;
    height:100%;
    left:-25%;
    top: 2%;
    margin-top:18px;
    background:black;
    -webkit-transform: skew(0,-45deg);
    -moz-transform: skew(0,-45deg);
    -o-transform: skew(0,-45deg);
    -ms-transform: skew(0,-45deg);
    transform: skew(0,-45deg);
}

.back:after{
    z-index:10;
    content:"";
    position: absolute;
    width:101%;
    height:6%;
    left:-12%;
    top: 0%;
    background:rgba(111,111,255,0.6);
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    transform: skew(-45deg);
}
.right{
    position: absolute;
    right:0%;
    width: 100%;
    height: 100%;
    background: red;
}

.right:before{
    content:"";
    position: absolute;
    width:25%;
    height:100%;
    right:0%;
    top: 3%;
    margin-top: 2px;
    background:black;
    -webkit-transform: skew(0,-45deg);
    -moz-transform: skew(0,-45deg);
    -o-transform: skew(0,-45deg);
    -ms-transform: skew(0,-45deg);
    transform: skew(0,-45deg);
}