We’re running a series of code challenges on the SitePoint Forums, and this week’s┬áchallenge is to create a die face using the following HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dicey Challenge</title>
<style type="text/css">

You will need to set the containing box to position relative, then absolutely position the six child divs within it and user border radius to transform them into circles. Your result should look something like this…

Dice challenge

Advanced Level Challenge
Using 3D transforms, present three sides of the die. You may modify the HTML as needed.

Expert Level Challenge
Spin the die 360 degrees on :hover.

You can find the answer here.

Tags: challenge, CSS, forums
Formerly a developer in the corporate world, HAWK (known as Sarah by her mother) said goodbye to the code and succumbed to the lure of social media. Community Manager for the SitePoint network for several years now. If you're a member of our community you'll be familiar with ^hawk.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • http://John-mulligan.com John M

    Nice! that a cool way to demonstrate some important techniques

    • http://thehawk.wordpress.com Sarah Hawk

      Glad you liked it John. The next challenge is coming up soon so keep an eye out. :)

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.