Align text horizontally to a diagonal div

Asked

Viewed 213 times

0

Um código css que faça isso que está na imagem

Hello guys I need a help to align the text to a pie div without distorting the text. (Same in the image) I need something in css or css3 if possible.

  • Put the code you already have in here

  • I just separated the image into two col-Md-6 from the bootstrap and used H1 and p with no more alignment formatting

1 answer

0

See if it helps.

#trap {
    position:absolute;
    z-index -1;
    float:left;
    margin-left:40px;
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-right: 40px solid transparent;
}
<div id="trap"></div>
<div style="float:left;clear:left;height:15px;width:84px"></div><div style="float:left;clear:left;height:15px;width:77px"></div><div style="float:left;clear:left;height:15px;width:70px"></div><div style="float:left;clear:left;height:15px;width:63px"></div><div style="float:left;clear:left;height:15px;width:56px"></div><div style="float:left;clear:left;height:15px;width:49px"></div><div style="float:left;clear:left;height:15px;width:42px"></div><div style="float:left;clear:left;height:15px;width:35px"></div><div style="float:left;clear:left;height:15px;width:28px"></div><div style="float:left;clear:left;height:15px;width:21px"></div><div style="float:left;clear:left;height:15px;width:14px"></div><div style="float:left;clear:left;height:15px;width:7px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div>
<p>
jhfjkshdfkjdshfkjhsjfhk<br/>
jksdfjkdsjf<br/>
çsjdfçlsjdf<br/>
çklsjdfçjs<br/>
çlsjdfçlj</p>

Take a look :in that and in that

Browser other questions tagged

You are not signed in. Login or sign up in order to post.