CSS HTML

Purely CSS Callouts

This article explains how you can create callouts using CSS and without using a single image. This will use the CSS thick border technique for creating slant area. Look at the callouts below:

 

This callout is created only using CSS. The arrow shown in the callout is basically a DIV with thick up border and transparent left and right border. And its height and width are 0. You only see the border or the DIV which will create the arrow like effect.

Here is the complete CSS and html code of this:

CSS Code

 

Html Code




Here is a full example and up side and down side callouts.

 

About the author

admin

Leave a Comment