SitePoint Code Challenge: CSS — Things Are About to Get Dicey

Sarah Hawk

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:

<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.

Free Chapter! HTML5 & CSS3 for the Real World

Get a free chapter of SitePoint's new book, the second edition of our popular HTML5 & CSS3 for the Real World and receive updates on our latest offers.

  • John M

    Nice! that a cool way to demonstrate some important techniques

    • Sarah Hawk

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