多行文本元素上的倾斜左边框答案

【问题标题】：Slanted left border on multiple line text element多行文本元素上的倾斜左边框
【发布时间】：2020-08-25 15:19:11
【问题描述】：

我想做这个：

我已经尝试过了（使用 Tailwind CSS）：

<div class="border-l-8 border-flourish-500 pl-12">
   <h1 class="text-5xl text-white font-black leading-none uppercase italic">Our<br/>
     <span class="text-flourish-500">Store</span></h1>
</div>

但在尝试添加倾斜时会变得很麻烦（在主 div 上添加 5° 变换，然后在文本上添加 -5°。）

我还认为使用 ::before 可能会起作用，但到目前为止还无法拉伸 H1 的（可变）高度。

有没有人有一种干净的（呃）方法来制作这样的东西？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

实际上这不是很直接，而且有点棘手，但是通过将skew 应用于:before 或:after 伪元素之一，这是可以实现的（有几个方法，但这是首选）。

html,
body {
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #141e41;
}

.story {
  position: relative;
  color: white;
  line-height: 1;
}

.story > span {
  color: #60b4e0;
}

.story::before {
  content: "";
  position: absolute;
  left: -80px;
  border: #60b4e0 solid 5px;
  transform: skew(-10deg);
  display: inline-block;
  height: 100%;
}

h1 {
  font-size: 5em;
}

<div class="container">
    <h1 class="story">
      OUR
      <span><br>STORY</span>
    </h1>
</div>

这是现场演示：codepen.io

【讨论】：

谢谢，看起来不错！不幸的是，它仍然具有声明的高度，因此不会在所有情况下都有效，但仍会将其标记为答案，因为在技术上有效。 ??
刚刚设置高度：100%

【解决方案2】：

您要查找的内容可能是transform: skew()。在下面做了一个工作示例。

.skew::before {
  content: "";
  border: #000 solid 5px;
  transform: skew(-10deg);
  display: inline-block;
  height: 3rem;
}

h1 {
  font-size: 5em;
}

<h1 class="skew">
  A nice title
</h1>

【讨论】：

感谢您的回答。不幸的是，声明高度意味着它不适用于多行。

【解决方案3】：

我最终使用 Tailwind 类来完成这项工作，而且效果很好。

<div class="border-l-8 border-flourish-500 transform -skew-x-6">
   <h2 class="h2 text-white ml-10 mb-8 transform skew-x-6">Find Your<br/>
     <span class="text-flourish-500">Chapter</span>
   </h2>
</div>

【讨论】：