我想用CSS3來構建一個盒子。尺寸應以百分比給出。我該如何計算出具有45deg偏斜的盒子部分的位置和尺寸的正確值。不知怎麼的，這些零件不適合在一起，這些零件重疊在一起，會縮短或太長。用CSS3構建一個盒子

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

來源

2013-11-04 user2952265

你有沒有考慮使用CSS3 3D變換來構建你的箱子，並使用'perspective'屬性來調整3D圖像應該看起來怎麼樣？你可以在這裏看到MDN是如何實現的 - https://developer.mozilla.org/en-US/docs/Web/CSS/perspective。此外，克里斯Coyier有一個非常邪惡的寫在這一點上，http://css-tricks.com/almanac/properties/p/perspective/ – Terry

我同意@Terry，但在這裏，你想要的只是以防萬一... http://jsfiddle.net/ZqpZ7/2/ –

@PedroEstrada這應該是一個答案！ :) – Terry

你的意思是這樣的嗎？

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-04 13:52:06

我只生成3個部分的盒子，因爲它足以看到部件不適合。總是有1-2個像素丟失或重疊。你的盒子的頂部不適合，另一方有我的相同的錯誤。它不適合... – user2952265

用CSS3構建一個盒子

jsFiddle

回答

相關問題