CODEWITHSUNDEEP
htmlcss
Max Koretskyi
Max Koretskyi

Reputation: 105547

triangle with border with pure css

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

Upvotes: 2

Views: 980

Answers (1)

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

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

Upvotes: 1

Related Questions