html - 如何将文本放在对 Angular 线上？

Question

嘿 guyz，我猜你看到上面的图片就明白了我的概念。我无法将对 Angular 线放在文本后面，它应该被放置在上面的内容掩盖。我想要它在纯 css 中。背景应该通过文本可见。

Answer 1

您可以使用旋转的伪元素。将它设为 1px 宽，并制作带有顶部/底部边框的线条:

body {
  padding: 0;
  margin: 0;
  background-image: url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg');
  background-size: cover;
}

div {
  position: relative;
  width: 150px;
  margin: 130px auto;
  padding: 10px 0;
}

div:before {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  width: 1px;
  height: 100%;
  border-top: 120px solid #000;
  border-bottom: 120px solid #000;
  -webkit-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
}

<div>
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus condimentum mi sit amet iaculis. Aliquam erat volutpat. Maecenas eleifend commodo rutrum.</p>
</div>