半透明傾斜背景

Question

我想要創建一個html元素，例如一個div，其樣式如下：

• 半透明背景色
• 邊界上的所有邊緣倒圓
• 的div左側繪製一條直線
• 的div右側平一條歪斜的線

我想只在CSS中創建它，並想知道這是否可能。到目前爲止，我提出了兩種不同的方法，這些方法有它們自己的缺點，但不夠充分。你可以在那些在這撥弄看看：

https://jsfiddle.net/n4tecna3/

.one-side-skew-1, 
 
.one-side-skew-2 { 
 
    font-size: 20px; 
 
    padding: 2%; 
 
    background-color: rgba(220, 50, 255, 0.6); 
 
    position: relative; 
 
    display: block; 
 
    border-radius: 4px; 
 
    z-index: 2; 
 
    color: #ffffff; 
 
    margin-top: 30px; 
 
} 
 
.one-side-skew-2 { 
 
    border-top-right-radius: 0px; 
 
} 
 
.one-side-skew-1:after { 
 
    height: 100%; 
 
    width: 20%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 85%; 
 
    display: inline-block; 
 
    content: ""; 
 
    background-color: rgba(220, 50, 255, 0.6); 
 
    -moz-transform: skewX(-10deg); 
 
    -webkit-transform: skewX(-10deg); 
 
    -ms-transform: skewX(-10deg); 
 
    -o-transform: skewX(-10deg); 
 
    transform: skewX(-10deg); 
 
    z-index: -1; 
 
    border-radius: 4px; 
 
} 
 
.one-side-skew-2:after { 
 
    border-top: 1em solid rgba(220, 50, 255, 0.6); 
 
    border-left: 0.25em solid rgba(220, 50, 255, 0.6); 
 
    border-right: 0.25em solid transparent; 
 
    border-bottom: 1em solid transparent; 
 
    border-top-right-radius: 4px; 
 
    left: 100%; 
 
    display: inline-block; 
 
    position: absolute; 
 
    content: ""; 
 
    top: 0; 
 
} 
 
.container { 
 
    width: 500px; 
 
}

<div class="container"> 
 
    <div class="one-side-skew-1"> 
 
    <span class="inner-text">One Side Skew With Pseudo Element Skewed</span> 
 
    </div> 
 

 
    <div class="one-side-skew-2"> 
 
    <span class="inner-text">One Side Skew With Pseudo Element Border</span> 
 
    </div> 
 
</div>

方法1 .one-side-skew-1採用圓邊框和歪斜，圓鑲上僞元素來創建一個div元素總而言之，單側傾斜元件。只要背景顏色是固定的，這個效果很好。對於半透明背景，您會看到元素與其僞元素相遇處的難看顏色重疊。

方法2 .one-side-skew2使用一個帶有僞元素的div元素，它僅由邊框組成。這有點冒險，但接近我想要的結果。儘管如此，右側看起來並不像第一種方法那麼順利。

其他人在CSS中只能解決這個問題嗎？或者我將不得不使用具有半透明背景圖像的回退解決方案來解決此問題？

Answer 1

您可以對所有背景使用僞元素，並使用元素的overflow屬性隱藏溢出部分。

這將防止元件和僞元件背景重疊，並允許半透明背景：

div { 
 
    position: relative; 
 
    width: 250px; 
 
    font-size: 20px; 
 
    border-radius: 4px; 
 
    overflow: hidden; 
 
    color: #fff; 
 
    padding: 1% 2%; 
 
} 
 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; right: 0; 
 
    width: 100%; height: 100%; 
 
    background: rgba(220, 50, 255, 0.6); 
 
    -webkit-transform-origin:100% 0; 
 
    -ms-transform-origin:100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: skewX(-10deg); 
 
    -ms-transform: skewX(-10deg); 
 
    transform: skewX(-10deg); 
 
    border-radius: 4px 4px 6px; 
 
    z-index: -1; 
 
} 
 

 

 
/** FOR THE DEMO **/body {background: url('http://lorempixel.com/output/people-q-g-640-480-3.jpg');background-size: cover;}

<div>content</div>