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

Question

我想做这个：

我试过了（使用 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 的（可变）高度。

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

Answer 1

您要找的可能是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>

Answer 2

实际上这不是很直接而且有点棘手，但是通过 将 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

Answer 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>

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

Slanted left border on multiple line text element

css

tailwind-css