Question

在标题之前，我添加了一个伪元素以使背景倾斜。标题可以换行，从而可以增加高度。我一直在努力使伪元素适应标题的高度，但到目前为止还算不上运气。

我已经使用了flex /（inline）block和absolute等各种组合。但是我似乎无法使其正常工作。

我需要它能够完全响应并且不使用JavaScript。

下图是标题仅包含一行的情况。

橙色：标题包装的背景
Purple：放置在标题前面的伪元素
绿色：标题

当我调整屏幕大小并显示标题时，它像这样显示：

如图所示，紫色元素太小

如果更改z-index，您会看到紫色元素：

以及我正在寻找的实际结果。紫色元素应始终位于标题的左侧，覆盖标题的整个高度，并显示倾斜的一面。

.title {
  display: flex;
  background-color: orange;
}

.title::before {
  flex-shrink: 0;
  height: 100%;
  width: 50px;
  content: '';
  transform: skew(-22.5deg);
  transform-origin: 0 100%;
  background-color: purple;
}

.title span {
  background-color: green;
}

<div class="title">
  <span>Some text for the title</span>
</div>

Answer 1

我创建了一个解决方案，该解决方案使用SVG向量而不是伪元素来实现您想要的效果。

您可以调整.title元素的高度，它将保持一致。

.title {
  display: flex;
  background-color: green;
  position: relative;
  height: 50px;
  overflow: hidden;
}

.module_title span {
  background-color: green;
}

.title span {
  padding: 5px 60px;
  color: white;
}

svg {
  position: absolute;
  left: 0px;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>z</title>
    <link rel='stylesheet' href="/mysite/static/.other/z.css">
  </head>
  <body>

    <div class="title">
      <svg class="orange" width="80" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon id="cover" points="0,100 0,0 50,0" style="fill: orange"></polygon>
      </svg>
      <svg class="purple" width="80" viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon id="cover" points="30,0 60,0 30,100 0,100" style="fill: purple"></polygon>
      </svg>
      <span>Some text for the title</span>
    </div>

  </body>
</html>

Answer 2

将继承值用于伪元素中的高度，如下所示：

.title:before {
  flex-shrink: 0;
  height: inherit;
  width: 50px;
  content: '';
  transform: skew(-22.5deg);
  transform-origin: 0 100%;
  background-color: purple;
}

Answer 3

尽管我喜欢@RobKwasowski的解决方案，但这可以在没有svg的情况下完成。大多数样式是您的样式，但我不使用flex。请注意，.title有position:relative;overflow:hidden; position:relative;是因为我希望before为position:absolute overflow:hidden;会删除多余的位的范围。

希望对您有帮助。

.title {
  background-color: orange;
  padding:0 0 0 3em;
  position:relative;
  overflow:hidden;
}

.title::before {  
  display:block;
  position:absolute;
  top:0;left:0;
  height: 100%;
  width: 50px;
  content: '';
  transform: skew(-22.5deg);
  transform-origin: 0 100%;
  background-color: purple;
}

.title span {
  display:inline-block;
  padding:2em 0 2em 5em;
  width:100%;
  background-color: green;
}

<div class="title">
  <span>Some text for the title<br>Some text for the title<br>Some text for the title</span>
</div>

没有JavaScript的动态尺寸伪元素CSS

3 个答案: