triangle with border with pure css

Question

I need to build a message holder with a tip in the form of triangle with border. I've managed to build the tip using two triangles:

#triangle-border {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 100px 80px 100px;
    border-color: transparent transparent #edb2b7 transparent;
}
#triangle-content {
    position:absolute;
    top: 20px;    
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 100px 80px 100px;
    border-color: transparent transparent #F9EDEF transparent;
}

I believe it can be done with one HTML object, I just can't figure out how. Can you please help?

I've added the example of the message container that I'm trying to build

enter image description here

and what should the final result look like compared to your fiddle? — Sebsemillia
– Sebsemillia, Commented Mar 9, 2014 at 20:53

Lokesh Suthar · Accepted Answer · 2014-03-09 21:08:48Z

1

Here FIDDLE. :after and :before are called pseudo elements.

<div id="message-holder"></div>

#message-holder {
    margin-top:50px;
    width:300px;
    height:300px;
    background: #F9EDEF;
    position:relative;
    border:1px solid #edb2b7;
}

#message-holder:before,#message-holder:after{
    content:"";
    position:absolute;
    top:-24px;
    left:25px;
    border-bottom:25px solid #f9edef;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
}
#message-holder:before{
    top:-25px;
    border-bottom-color:#edb2b7;
}

answered Mar 9, 2014 at 21:08

Lokesh Suthar

3,2121 gold badge18 silver badges28 bronze badges

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

12 Comments

Max Koretskyi Over a year ago

That's amazing, thank you very much! It seems complicated though. I'd need to understand how this works so I can mold it into the form on the image that I uploaded. Can you please provide a short description? Thanks!

Lokesh Suthar Over a year ago

Here is a great tutorial on how to use :before and :after pseudo elements.

Lokesh Suthar Over a year ago

Here is an update fiddle which is close to what you want. Now as they are pseudo elements, they cannot exist on their own without the #message-holder

Lokesh Suthar Over a year ago

See, when we use left:50% the left starts from the starting of the tip and if you add tip's width to it, it doesn't really center but is a bit to the right side. -webkit-transform:translateX(-50%); pushes the tip to -50% of it's total width. You can use similar concept for vertical middle alignment too.

Lokesh Suthar Over a year ago

Check this pen. It has multiple vertical alignment options.

|

Collectives™ on Stack Overflow

triangle with border with pure css

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related