Diamond in the HTML “Rough”

KwiClick Search CloversFor the latest version of KwiClick we introduced a feature called search clovers. When you highlight a word on a page, a single diamond shaped “clover” appears. When you hover over the diamond, 3 more diamonds appear creating a 4 leaf clover configuration. To create these diamonds we use two html tags, an img surrounded by a div. Clover OverlapIn Firefox versions prior to 3.5 we used a background image on the div to create the look of a the diamond. The corners of the images overlapped each other causing problems when a user tried to hover or click on one of them.


With Firefox 3.5 we were able to fix this by creating the diamond using only html and some specialized css tags. Using the tags: -moz-transform, -moz-border-radius, and -moz-box-shadow we rotate the div 45 degrees and add a shadow to them.

  display: inline-block !important;
  border: 2px solid #494949 !important;
  background: none !important;
  background-color: white !important;
  -moz-transform: rotate(45deg) !important;
  -moz-border-radius: 4px !important;
  -moz-box-shadow: grey 2px 2px 2px !important;

This also rotates the content within the div. To fix that we rotate the image back 45 degrees. 

  -moz-transform: rotate(-45deg) !important;

And viola, a diamond with all the html event goodness, made with only html and css. Safari and Chrome support these transforms with -webkit-transform so this same effect can be used there.