使用transform：rotateZ（）和:: after伪元素

Question

我想在一些横幅上添加一些标签...我的横幅只是一个带有背景颜色属性的h1元素，它延伸了包含元素的宽度。

这是我的CSS：

.banner {
    position: relative;
    z-index: 1000;
    padding: 20px;
}

.banner-blue {
    background-color: #93DEFF;
    color: #222222;
}

.banner-yellow {
    background-color: #FFF072;
    color: #777777;
}

.banner-red {
    background-color: #FF356B;
    color: white;
}

我会像这样申请：

<h1 class="banner banner-yellow">I'm a banner!</h1>

我的问题：

我想覆盖横幅背景的副本，但更改颜色并在z轴上稍微旋转以获得这样的效果。

但是我无法解决如何使用::之前（或者是之后）psuedo-elements来做到这一点......这是我尝试过的：

.banner-red::before {
    display: block;
    position: absolute;
    padding: 20px;
    content: "";
    background-color: rgba(255,30,60,0.4);
    transform: rotateZ(3deg);
    width: 100%;
    margin-left: -30px;
}

以下是它运行的代码：看起来不太好：https://codepen.io/jethazelhurst/pen/JyKqRB

Answer 1

只需向相反方向旋转您的方框：transform: rotateZ(-3deg);

您可以设置top和left值，以便正确放置旋转的框。

.banner-red::before {
    display: block;
    position: absolute;
    content: "";
    background-color: rgba(255,30,60,0.4);
    transform: rotateZ(-3deg);
    width: 102%;
    height: 97px;
    margin-left: -30px;
    top: 2px;
}

当然，您可以更改颜色：水平框为#91c6ff，旋转的框为#91c6ff。而且，它们是透明的。

这是您项目的一个分支：https://codepen.io/anon/pen/zdBVGe

用颜色：

Answer 2

使用另一个子元素创建一个元素，例如span。然后，您可以在span上设置z-index，以便文本位于伪元素之上。

＆＃13;

＆＃13;

div {
  background: #91C6FF;
  padding: 25px;
  margin: 40px;
  position: relative;
}
div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(135, 171, 255, 0.7);
  transform: rotate(-4deg);
}
span {
  position: relative;
  z-index: 2;
  font-size: 30px;
}

＆＃13;

<div><span>Lorem ipsum dolor.</span></div>

＆＃13;

＆＃13;

＆＃13;