CSS3 implementation triangle, chat background bubbles, heart shape and other shapes

1, chat background bubbles:

The CSS code is as follows:

#talkbubble{width:120px;margin:Auto;background:Red;position:relative;-moz-border-radius:10px;-webkit-border-radius:10px;Border-radius:10px; }#talkbubble: Before{content:"";position:Absolute; Right:100%;Top:26px;width:0;Height:0;Border-top:13px Solid Transparent;Border-right:26px Solid Red;Border-bottom:13px Solid Transparent; }

2. Heart Shape:

The CSS code is as follows:

3, Positive triangle:

The CSS code is as follows:

#triangle-up {width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; Border-bott om:100px solid red; }

4, Inverted triangle:

The CSS code is as follows:

#triangle-down {width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-to p:100px solid red; }

　　

CSS3 implementation triangle, chat background bubbles, heart shape and other shapes