0

CSS3でボックスを作りたいです。寸法はパーセンテージで指定します。45 度の傾斜があるボックスの部分の位置と寸法の正しい値を計算するにはどうすればよいですか。どういうわけかパーツが合わなかったり、パーツが重なったり、短すぎたり長すぎたりします。

jsフィドル

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);
}
4

1 に答える 1

0

このようなことを意味しますか？

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);
}
于 2013-11-04T13:52:06.057 に答える