Time ago I stumbled across a review of James Edward's article The Art and Science of JavaScript Games.

He had the idea to write a 3D JavaScript / DHTML maze game, using CSS borders to create triangles.

Since then, I realice the power of css borders to create geometrical figures. This allow me to forget about images, and create the geometric shapes with only a few lines of css.


1. comicstrips

The base is realy simple:

Lets create a simple HTML element with 10px border, and diferent colors for horizontal and vertical borders:

html element

If we use now an HTML element with dimensions 0 × 0 we get this:

Setting now diferent border size, and color for each border element (top,bottom,left and right), we can create a simple triangle and then place it were we want.

html element

Lets check the code for this comicstrips.

CSS code:

.comicBallonBox
  {
  border-width:0px;
  border-style:solid;
  border-color:inherit;
  position:relative;
  background-color:inherit;
  padding:7px;
  padding-left:10px;
  padding-right:10px;
  }

.comicBallonBox .arrow
  {
  overflow:hidden;
  position:absolute;
  bottom:-17px;
  border-color:inherit;
  }

.comicBallonBox .arrow div
  {
  border:17px solid transparent;
  border-top-color:inherit;
  border-bottom-width:0px;
  position:relative;
  }

.comicBallonBox .arrow .right
  {
  border-right-width:0px;
  }

.comicBallonBox .arrow .left
  {
  border-left-width:0px;
  }

HTML example:

<div class='comicBallonBox' style='color:#222;background-color:#30c4ff;
border-color:#30c4ff;'>
  <span style='font-family:verdana;'>Content here</span>
  <div class='arrow' style='left:22px;'><div class='left'></div></div>
</div>

2. Postage Stamp

To create a "stamp" look, we can use the dashed border in combination with our image background color.

0.45 €


HTML & CSS:


<div class='stamp'><p>[YOUR MESSAGE]</p></div>

.stamp {
    position:relative;
    background-image:url([YOUR IMAGE]);
	width:200px;
	height:214px;
	border:3px dashed #000; }

.stamp p {
	color:#fff;
	margin:2px 10px 0 0;
	font:bold 30px "Times New Roman", Times, serif;
	text-align:right;
}


3. Polaroid Picture

If you want your images to look like Polaroid pictures, you could use this very easy and simple technique. By increasing the padding-bottom you get that "polaroid" look.

Paris !

HTML & CSS:


<img class='polaroid' src='[YOUR IMAGE]'/>
<div class='message'>[YOUR MESSAGE]</div>

.polaroid {
    border: 1px solid #666666;
    padding: 10px 10px 60px 10px;
    }

.polaroid .message {
  padding-top:-60px;height:60px;
}