how create triangle using css [duplicate]

Question

Please any one help me how create below diagram using css.

    ________/\_______
   |                |
   |                |
   |                |
   |________________|

Please help me how to it will done using css.and only div should be use.

After making some minor changes. Now, all you need to do is figure out how to align it on the top. — Weafs.py
– Weafs.py, Commented Jan 9, 2015 at 4:45

alexwc_ · Accepted Answer · 2015-01-09 05:06:03Z

2

See here: http://jsfiddle.net/alexwcoleman/6ue8vvba/

.box {
    position: relative;
    border: 1px solid #000;
    height:100px;
    width:300px;
    margin-top:100px;
    background:#fff;
}
.box:after, .box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #fff;
    border-width: 30px;
    margin-left: -30px;
}
.box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #000;
    border-width: 31px;
    margin-left: -31px;
}

answered Jan 9, 2015 at 5:06

alexwc_

1,5912 gold badges25 silver badges35 bronze badges

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

Comments

Jenti Dabhi · Accepted Answer · 2015-01-09 05:00:44Z

1

This code use for create triangle:

HTML:
<div id="talkbubble"></div>

CSS:
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
    margin-top: 50px;
}
#talkbubble:before {
   content: "";
position: absolute;
right: 43%;
bottom: 100%;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-bottom: 25px solid red;
border-right: 11px solid transparent;
}

SEE DEMO HERE:DEMO

answered Jan 9, 2015 at 5:00

Jenti Dabhi

8805 silver badges11 bronze badges

Collectives™ on Stack Overflow

how create triangle using css [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related