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, May 07 '14 at 07: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, May 07 '14 at 07:07

web-tiki · Accepted Answer · 2014-05-08T11:35:48.227

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

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.. — Hardik, May 07 '14 at 11:42
@Hardik glad I could help, don't hesitate to vote up both answers if they helped :) — web-tiki, May 07 '14 at 12:30

score 0 · Answer 2 · edited May 23 '17 at 11:59

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

Create responsive triangle with text

2 Answers2