Question

目标是codepen中的红色部分到达左端。

问题是我无法添加更多html，因为它来自我们的cms。
线宽必须是动态的。
背景有点透明。

我已尝试使用盒子阴影进行破解，但这取决于线宽。

div {
  padding: 0 500px;
  width: 300px;
  background-color: green;
}

p {
  top: 10px;
  padding: 10px 0;
  bottom: 20px;
  line-height: 50px;
  display: inline;
  background-color: rgba(255,255,255,.9);
  position: relative;
  box-shadow: 
    17px 0  0 0 rgba(255,255,255,.9),
    -200px 0 0 rgba(255,0,0, 0.5);
}

您应该查看codepen以完全理解这个问题：

Answer 1

尝试使用线性渐变的:before伪选择器。

p:before {
    content: "";
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5) 37px, rgba(0, 0, 0, 0) 37px, rgba(0, 0, 0, 0));
    background-size: 100% 50px;
    left: -500px;
    top: 0px;
    width: 500px;
    position: absolute;
}

这不需要修改您现有的p样式。

如果您不确定红色标签的宽度，可以将left和width设置为一个非常大的数字，并在容器div上设置overflow: hidden;。< / p>

http://codepen.io/anon/pen/MaPdZg?editors=110

Answer 2

div上的重复背景怎么样？

div {
      overflow: hidden;
      padding: 0 500px;
      width: 300px;
      background-color: green;
      background-image:linear-gradient(to bottom, green 0%, green 12%, #804000 12%, #804000 88%, green 88%, green 100%);
      background-position:0 10px;
      background-size:500px 50px;
      background-repeat:repeat-y;
    }

    p {
      top: 10px;
      padding: 10px 0;
      bottom: 20px;
      line-height: 50px;
      display: inline;
      background-color: rgba(255,255,255,.9);
      position: relative;
      box-shadow: 
        17px 0  0 0 rgba(255,255,255,.9);
    }

<div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>

Answer 3

滥用转换＆＃34;解决方案＆＃34;：http://codepen.io/anon/pen/ZbqNXN?editors=010

使用伪创建一个矩形，位于当前盒阴影所在的位置，然后向左展开100x（注意transform-origin，避免向右扩展）
父母overflow: hidden避免看到灾难...溢出:)。

div {
      overflow: hidden;
}
p:before {
  content: "";
  display: block;
  position: absolute;
  top: 0; bottom: 0; left: -100%; right: 100%;
  transform-origin: right center;
  transform: scaleX(100);
  background-color: blue;
}

内联文本和扩展背景

3 个答案: