使用 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 轴上稍微旋转它以获得这样的效果。

但是我不知道如何使用 ::before（或者是 ::after）伪元素来做到这一点...这是我尝试过的方法：

.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，这样文本就在伪元素上面。

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;
}

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

使用 transform: rotateZ() 和 ::after 伪元素设计横幅样式

Style a banner using transform: rotateZ() and ::after pseudo-elements

html

css

pseudo-element