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

我正在寻找这个:



我已经尝试过(使用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的(可变)高度。

有人有做这种事情的干净方法吗？

最佳答案

实际上这不是很简单，并且有些棘手，但是通过将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

关于css - 多行文本元素上的左边框倾斜，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61706734/