Create responsive triangle with text

Question

I need to created a responsive triangle using css and html. The triangle will comprise of text and as the text would increase I want the size of triangle to also increase.

Below is the fiddle which I have 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 follow links but it seems the triangle shape is different and the text does not seem to wrap. Text starts overflowing.

Link1 and link2

Thanks, Hardik

why don't you use a background-image? we can't expect everything to be done in CSS.. — Mr_Green
– Mr_Green, Commented May 7, 2014 at 7:03
I agree...previously we had achieved the same using an image, but now we are told to achieve the same using CSS... :( I was wondering if there is a possibility of achieving the same via CSS-CSS3..Thanks for your valuable time! — Hardik
– Hardik, Commented May 7, 2014 at 7:07

web-tiki · Accepted Answer · 2014-05-08 11:35:48Z

3

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

FIDDLE

triangle that adpats to its content

This technique might need a bit of tweaking according to the context you use it in (container with to traingle width ratio) and the design you want when text becomes larger.

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;    
}

edited May 8, 2014 at 11:35

answered May 7, 2014 at 9:35

web-tiki

104k33 gold badges226 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hardik Over a year ago

Clever!! Awesome way to implement, didn't think of rotating the div at all. Thanks for the fiddle and the response!! Also thanks to @Mr_Green for the idea and time..

web-tiki Over a year ago

@Hardik glad I could help, don't hesitate to vote up both answers if they helped :)

Community · Accepted Answer · 2017-05-23 11:59:39Z

0

I think it is possible using just CSS Gradient. As I am not good with gradients, I used online CSS 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 Fiddle

CommunityBot

11 silver badge

answered May 7, 2014 at 7:52

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Collectives™ on Stack Overflow

Create responsive triangle with text

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related