半透明倾斜背景

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>