css – 半透明的倾斜背景

我想创建一个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中有这个问题的好方法吗?或者我将使用带有半透明背景图像的后备解决方案来解决这个问题?

最佳答案
您可以为所有背景使用伪元素,并使用元素上的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>

转载注明原文:css – 半透明的倾斜背景 - 代码日志