CSS3變換傾斜一方

Question

是否有可能創造「CSS3變換傾斜一方」

我找到了一個解決方案，但它不是對我有用的，因爲我需要用一個形象的背景（不變色）

#skewOneSide { 
    border-bottom: 40px solid #FF0000; 
    border-left: 50px solid rgba(0, 0, 0, 0); 
    height: 0; 
    line-height: 40px; 
    width: 100px; 
} 

即使這JsFiddle是不是有用的（傾斜區域應是透明的）

Answer 1

你嘗試用:before相當接近，你不得不用，而不是邊界歪斜實際上改變的唯一的事情： http://jsfiddle.net/Hfkk7/1101/

編輯：你的邊框方法也能工作，你做錯的唯一的事情就是在你的div上面有before元素，所以透明邊框不會顯示。如果你想有僞元素添加到div的左側位置，一切都已經工作太：http://jsfiddle.net/Hfkk7/1102/

Answer 2

試試這個：

要unskew圖像使用div嵌套的圖像，並給它是相反的歪斜值。所以，如果你的父母有20deg，那麼你可以給嵌套的（圖片）div一個-20deg的歪斜值。

.container { 
 
    overflow: hidden; 
 
} 
 

 
#parallelogram { 
 
    width: 150px; 
 
    height: 100px; 
 
    margin: 0 0 0 -20px; 
 
    -webkit-transform: skew(20deg); 
 
    -moz-transform: skew(20deg); 
 
    -o-transform: skew(20deg); 
 
    background: red; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    background: url(http://placekitten.com/301/301); 
 
    position: absolute; 
 
    top: -30px; 
 
    left: -30px; 
 
    right: -30px; 
 
    bottom: -30px; 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    -o-transform: skew(-20deg); 
 
}

<div class="container"> 
 
    <div id="parallelogram"> 
 
    <div class="image"></div> 
 
    </div> 
 
</div>

的例子：

http://jsfiddle.net/diegoh/mXLgF/1154/

Answer 3

我知道這是舊的，但我想用一個線性漸變，以達到同樣的效果，而不是保證金建議抵消。這將保留任何內容在原來的位置。

http://jsfiddle.net/zwXaf/2/

HTML

<ul> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
</ul> 

CSS

/* reset */ 
ul, li, a { 
    margin: 0; padding: 0; 
} 
/* nav stuff */ 
ul, li, a { 
    display: inline-block; 
    text-align: center; 
} 
/* appearance styling */ 
ul { 
    /* hacks to make one side slant only */ 
    overflow: hidden; 
    background: linear-gradient(to right, red, white, white, red); 
} 
li { 
    background-color: red; 
    transform:skewX(-20deg); 
    -ms-transform:skewX(-20deg); 
    -webkit-transform:skewX(-20deg); 
} 
li a { 
    padding: 3px 6px 3px 6px; 
    color: #ffffff; 
    text-decoration: none; 
    width: 80px; 
    transform:skewX(20deg); 
    -ms-transform:skewX(20deg); 
    -webkit-transform:skewX(20deg); 
} 

Answer 4

你可以在使用變換和變換的起源。

結合各種轉換結果給出了相似的結果。我希望你覺得這對你有幫助。 :) 請參閱這些示例以獲得更簡單的轉換。這留下了一點：

div {  
 
    width: 300px; 
 
    height:200px; 
 
    background-image: url('http://placecage.com/g/300/200'); 
 
    -webkit-transform: perspective(300px) rotateX(-30deg); 
 
    -o-transform: perspective(300px) rotateX(-30deg); 
 
    -moz-transform: perspective(300px) rotateX(-30deg); 
 
    -webkit-transform-origin: 100% 50%; 
 
    -moz-transform-origin: 100% 50%; 
 
    -o-transform-origin: 100% 50%; 
 
    transform-origin: 100% 50%; 
 
    margin: 10px 90px; 
 
}

<div></div>

這有右斜點：

div {  
 
    width: 300px; 
 
    height:200px; 
 
    background-image: url('http://placecage.com/g/300/200'); 
 
    -webkit-transform: perspective(300px) rotateX(-30deg); 
 
    -o-transform: perspective(300px) rotateX(-30deg); 
 
    -moz-transform: perspective(300px) rotateX(-30deg); 
 
    -webkit-transform-origin: 0% 50%; 
 
    -moz-transform-origin: 0% 50%; 
 
    -o-transform-origin: 0% 50%; 
 
    transform-origin: 0% 50%; 
 
    margin: 10px 90px; 
 
}

<div></div>

什麼transform: 0% 50%;所做的就是設置原點到垂直中和水平元素左側。所以透視圖在圖像的左側不可見，所以看起來很平坦。透視效果在右邊部分，所以看起來很傾斜。