我想创建一个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,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,0.6);
border-left: 0.25em solid rgba(220,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元素。这有点黑客，但接近我想要的结果。然而，权利看起来并不像第一种方法那样顺利。
解决方法
您可以为所有背景使用伪元素，并使用元素上的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,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>
