半透明倾斜背景

Question

半透明倾斜背景

19

我想创建一个HTML元素，例如一个div，其样式如下：

半透明背景色
所有边缘都有圆角
div的左侧绘制一条直线
div的右侧绘制一条倾斜的线

我希望只使用CSS来创建它，不知道是否可能。到目前为止，我想出了两种不同的方法，它们各自有缺点并不完全满足要求。您可以在此fiddle中查看这些方法： 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 元素，在其后面放置了一个伪元素。这有点 hacky，但接近我想要的结果。尽管如此，右侧的外观远不如第一种方法平滑。

是否有其他人在 CSS 中有解决此问题的好方法？或者我必须使用半透明的 background-image 的回退方案来解决这个问题？

- jessica

另一种可能性（但会扭曲div内容）在这里：https://dev59.com/S2Eh5IYBdhLWcg3wvVp4#22070681 - vals

@vals 我之前也写过一个类似的答案! 这种方法可以用作元素的伪元素，这样就不会扭曲了。 - Max Payne

使用第二种方法的问题：在移动Safari（iPhone 5C，最新iOS）中缩放会导致伪元素消失。 - 11684

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

你可以使用伪元素为所有背景设置样式，并通过在元素上使用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>