CSS triangles with borders

Creating those cool little css triangles with borders has been a recent topic at work on different design, custom images vs borders, cross-browser support, etc...  So in the effort of doing it myself, I did what any good developer does, I googled it and found out what other people did.  I noticed that some sites had the speech bubbles (Craig Buckler did a great job here).  I used most of his steps in this entry, so I wanted to make sure I called it out.  However, I did notice that there were some other options (inset vs outset) and a ribbon example.  Rather than scavenging all those sites, I decided to put together my own examples.

Here is the base css for the speech bubble [css] p.speech { position: relative; margin-top: 50px; width: 200px; height: 100px; text-align: center; line-height: 100px; background-color: #fff; border: 4px solid #666; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; box-shadow: 2px 2px 4px #888; } p.speech:before, p.speech:after{ content: ' '; position: absolute; width: 0; height: 0; } p.speech:before{ border: 20px solid; } p.speech:after{ border: 15px solid; } [/css]

Here is the unique part for each one of the elements for the speech:

Speech Bottom

[css] p.speech.bottom:before { left: 30px; top: 100px; border-color: #666 transparent transparent #666; } p.speech.bottom:after { left: 34px; top: 100px; border-color: #fff transparent transparent #fff; } [/css]

Speech Right

[css] p.speech.captionRight:before { left: 200px; top: 40px; border-color: transparent transparent #666 #666; } p.speech.captionRight:after { left: 200px; top: 45px; border-color: transparent transparent #fff #fff; } [/css]

Speech Left

[css] p.speech.captionLeft:before { left: -40px; top: 40px; border-color: transparent #666 #666 transparent; } p.speech.captionLeft:after { left: -30px; top: 46px; border-color: transparent #fff #fff transparent; }

[/css]

Speech Top

[css] p.speech.captionTop:before { left: 40px; top: -40px; border-color: transparent #666 #666 transparent; } p.speech.captionTop:after { left: 46px; top: -30px; border-color: transparent #fff #fff transparent; } [/css] Here is the base for the insets: [css] p.inset { position: relative; margin-top: 50px; width: 200px; height: 100px; text-align: center; line-height: 100px; background-color: #fff; border: 4px solid #666; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; box-shadow: 2px 2px 4px #888; } p.inset { width: 200px; height: 100px; background-color: #fff; position: relative; border: 4px solid #888; } p.inset:before, p.inset:after{ content: ' '; position: absolute; width: 0; height: 0; } p.inset:before{ border: 10px solid; } [/css]

Inset Bottom

[css] p.inset.captionBottom:before { left: 90px; top: 80px; border-color: transparent transparent #888 transparent; } [/css]

Inset Right

[css] p.inset.captionRight:before { left: 180px; top: 45px; border-color: transparent #888 transparent transparent; } [/css]

Inset Left

[css] p.inset.captionLeft:before { left: 0px; top: 45px; border-color: transparent transparent transparent #888; } [/css]

Inset Top

[css] p.inset.captionTop:before { left: 90px; top: 0px; border-color: #888 transparent transparent transparent; } [/css]

Thought Bubble

Here is everything for a thought bubble: [css] p.thought { position: relative; width: 130px; height: 100px; text-align: center; line-height: 100px; margin-top: 40px; background-color: #fff; border: 8px solid #666; -webkit-border-radius: 108px; -moz-border-radius: 108px; border-radius: 108px; -webkit-box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; box-shadow: 2px 2px 4px #888; } p.thought:before { content: ' '; position: absolute; left: 10px; top: 70px; width: 40px; height: 40px; background-color: #fff; border: 8px solid #666; -webkit-border-radius: 28px; -moz-border-radius: 28px; border-radius: 28px; } p.thought:after { content: ' '; position: absolute; width: 20px; height: 20px; left: 5px; top: 100px; background-color: #fff; border: 8px solid #666; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; } [/css]

Some Text

Here is everything for a ribbon effect [css] .ribbon { width: 100px; height: 20px; margin-top:100px; background-color: #f89; position: relative; border: 4px solid #f89; } .ribbon:after, .ribbon:before { border: solid transparent; content: ' '; height: 0; left: 100%; position: absolute; width: 0; } .ribbon:before { border-width: 10px; border-top-color: #f89; border-left-width: 60px; border-right-width: 0px; left: 0px; top: 24px; } .ribbon:after { border-width: 2px; border-top-color: #FD3; border-left-width: 60px; border-right-width: 0px; left: 0; top: 24px; } [/css]

I hope this little bit of excerpts help you improve your css and if you have suggestions on how to improve this, please let me know. I know there is always another way. :-)

Thanks for stopping by.