How to Create Triangle in CSS

Some web developers use extra wrapper with a background image over empty elements every time they are trying to create triangle. There are several techniques to create triangles in CSS and here are some of them to try.

Using the following tips you will take advantage of a browser drawing the borders at angles. One side of the border is coloured while others are transparent.

.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}

That was right triangles in the square. And now you can change border size and get acute triangles as well:

.css-arrow-acute {
border-color: red green blue orange;
border-style:solid;
border-width:25px 10px 15px 30px;
width:0;
height:0;
}

Be creative and create a lot of shapes to try. For example,

border-style:dotted;

or

border-style:dashed;

or

border-style:groove;

as well as

border-style:double;

You also can try the following to create classic chat bubble with no images used:

Hello!

.chat-bubble {
background-color:#EDEDED;
border:2px solid #666666;
font-size:35px;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:300px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
border-color: #666666 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-22px;
left:30px;
}

.chat-bubble-arrow {
border-color: #EDEDED transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-19px;
left:30px;
}

However, it doesn’t work for IE6, because this browser doesn’t allow transparent borders. Anyway, there is some tip to fix it. All you need is to give completely different color such as green to the “transparent” sides. Then use filter: chroma in order to turn that colour transparent.

/* IE6 */
.chat-bubble-arrow {
_border-left-color: pink;
_border-bottom-color: pink;
_border-right-color: pink;
_filter: chroma(color=pink);
}

Reference: hwww.onderhond.com/blog/work/css-triangles-issues