If given an uneven-shaped green box which contains copy, how would you go about creating the uneven-shaped box using at least one CSS3 property?

border-radius property but can also be done with:



div#trapezoid2 {

width:100px; height:0;


border-top:100px solid #C2762B;

border-right:50px solid #AAC32B;

border-bottom:250px solid #C2C2C2;

border-left:75px solid #3D3D3D;



<div id=”trapezoid2″></div>

(For more info: http://www.vanseodesign.com/css/creating-shapes-with-css-borders/)

Another approach by Yassir

#weirdBox {

background-image: url(“../images/national-top.gif”), url(“../images/national-bottom.gif”);

background-position: 0 0px, 0 189px;

background-repeat: no-repeat, no-repeat;

background-color: #C8CD92;



Although your solution does offer a css solution, it doesn’t actually make many unique shapes, I was thinking more along the lines of using multiple backgrounds to come up with the shape with a solid background color for the box itself.



I was referring to the issue with IE that makes everything inline and look all weird with HTML 5 tags. Display: block fixes the issue.

header, section, footer, aside, nav, figure {

display: block;




In order for HTML5 elements to display properly in IE (layout-wise), what CSS3 element is recommended to include at the beginning of the .css document?


behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the ‘box’ class */

For more info: http://fetchak.com/ie-css3/



What is the benefit of using em to define size vs px or pt? (I would add percent to this)


In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design. (For more http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/)