Geek Answers Handbook

Create a responsive triangle with text

I need to create a sensitive triangle using css and html. The triangle will contain the text, and as the text grows, I want to increase the size of the triangle.

Below is the script I created.

fiddle

<div class="wrapper"> <div class="top-layer-content banner-notch"></div> <a class="icon-play fa fa-play-circle-o" rel="lightbox" href="#"> <p> See it in action</p> </a> <div> 

 .wrapper{ position:relative; } .banner-notch { width: 0; height: 0; border-bottom: 220px solid #000; border-left: 220px solid transparent; filter: alpha(opacity=50); opacity: 0.6; color:white; position:relative; float:right; } .wrapper a{ position:absolute; top:130px; right:20px; color:white; text-decoration:none; font-size:25px; background-position:0 50px; } .wrapper .fa-play-circle-o:before{ padding-left:38px; } .wrapper p{ font-size:16px; }

I checked the following links, but it seems that the shape of the triangle is different and the text does not seem to wrap. The text begins to overflow.

Link1 and link2

Thanks Hardik

+6
source share
2 answers

You can use pseudo-elements and transform:rotate() to create a triangle that adapts to the size of its contents.

Fiddle

triangle that adpats to its content

This method may require a little tweaking to the context in which you use it (a container with a track-width ratio), and the design you want when the text gets bigger.

HTML:

 <div class="wrapper"> <a class="icon-play fa fa-play-circle-o" rel="lightbox" href="#"> <p> See it in action</p> </a> </div>

CSS

 .wrapper{ position: relative; float:right; clear:right; overflow:hidden; z-index:1; padding:0 1% 0 30%; margin-right:5%; } .fa-play-circle-o{ display:block; margin:130% 0 2%; color:#fff; text-decoration:none; font-size:18px; text-align:center; } .fa-play-circle-o:before{ font-size:30px; } .wrapper:after{ content:""; position:absolute; background-color:#666666; width:500%; height:100%; top:0;right:0; z-index:-1; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform-origin:100% 0; -webkit-transform-origin:100% 0; transform-origin:100% 0; }
+3
source

I think that only CSS Gradient can be used. Since I'm not very good with gradients, I used the CSS online gradient generator and did the following:

CSS

 .triangle { width: 300px; border: 1px solid black; background-image: -webkit-gradient(linear, left top, left top, color-stop(0, #000000), color-stop(0.5, #FFFFFF)); background-image: -o-linear-gradient(left top, #000000 0%, #FFFFFF 50%); background-image: -moz-linear-gradient(left top, #000000 0%, #FFFFFF 50%); background-image: -webkit-linear-gradient(left top, #000000 0%, #FFFFFF 50%); background-image: -ms-linear-gradient(left top, #000000 0%, #FFFFFF 50%); background-image: linear-gradient(to left top, #000000 0%, #FFFFFF 50%); }

Working script

Connected

0
source

More articles:


All Articles