Как разместить текст по диагональной линии?
Эй, парни, я думаю, вы получили мою концепцию, увидев вышеприведенную картину. Я не могу поместить диагональную линию за текст, и он должен быть замаскирован содержимым, размещенным на нем. Я хотел это в чистом css. Фон должен быть видимым через текст.
Вы можете использовать повернутый псевдоэлем Ent. Сделать это 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>Я думаю, что вы ищете this-
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);
}<div>
\t \t \t <h2>dsfsd jf fkljdsfjdsj</h2>
\t \t \t <p>Loream ipsum dolor shit amet</p>
\t \t </div>Я надеюсь, что это поможет.
Да, я застрял здесь. Я использую изображение в качестве фона всей страницы. Таким образом, я не могу использовать цвет за текстом. –
О, ладно! Я получил вашу точку –
Извините, что сказал это, но мне не нужно копировать ваш ответ. (Спасибо, что не занижена). –
Вы можете сделать с помощью псевдо-селекторов : после или : перед тем
Скачать этот png изображение для фона http://i.imgur.com/Kv22GCi.png 
.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
}<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>, вы можете включить префикс для вашего преобразования для кросс-браузера, – jbutler483
@ jbutler483 Добавлены префиксы поставщиков сейчас? – Suresh
Не могли бы вы изменить свой вопрос, чтобы объяснить, что это такое * точно * вы пытаетесь сделать. Прямо сейчас я изо всех сил пытаюсь понять, что это такое ... – jbutler483
@ jbutler483 и, во всяком случае, 2 upvotes ... – vals
@vals: Ничто не удивляет меня на SO больше ... – jbutler483