如何在对角线上放置文字？

Question

嘿guyz，我猜你通过看到上面的图片得到了我的概念。我无法在文本后面放置对角线，它应该被放在其上的内容掩盖。我希望它在纯粹的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>

Answer 2

我认为你正在寻找这个 -

＆＃13;

＆＃13;

body{background: url('http://i.imgur.com/Kv22GCi.png');}
div {
  position: relative;
  width: 120px;
  margin: 100px auto;
  padding: 5px 0;
}
div:before {
  content: '';
  position: absolute;
  top: -100px; left: 45%;
  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);
}

＆＃13;

<div>
			<h2>dsfsd jf fkljdsfjdsj</h2>
			<p>Loream ipsum dolor shit amet</p>
		</div>

＆＃13;

＆＃13;

＆＃13;

我希望这会对你有所帮助。

Answer 3

您可以使用伪选择器：在之后或：之前

下载此png图片以查看背景http://i.imgur.com/Kv22GCi.png

＆＃13;

＆＃13;

.container {
  position: relative;
  width: 300px;
  height: 548px;
  border: 1px solid #ccc;
  background-image: url(http://i.imgur.com/Kv22GCi.png);
  padding: 50px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: sans-serif
}
/*For the diagonal line*/

.container:after {
  content: "";
  position: absolute;
  height: 100%;
  border: 1px solid #000;
  top: 0;
  left: 70px;
  z-index: -1;
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg)
}
h1 {
  font-size: 50px
}
p {
  font-size: 22px
}

＆＃13;

<div class="container">
  <h1>About Us.</h1>

  <p>"Lorem ipsum sit amet.Lorem ipsum sit amet.Lorem ipsum sit amet.Lorem ipsum sit amet.Lorem ipsum sit amet.Lorem ipsum sit amet.Lorem ipsum sit amet."
    <p/>
</div>

＆＃13;

＆＃13;

＆＃13;