Skew the element

I’m not sure why this code isn’t working.
The directions are as follows:

Skew the element with the id of bottom by 24 degrees along the X-axis by using the transform property.


div {

width: 70%;

height: 100px;

margin: 50px auto;


#top {

background-color: red;


#bottom {

background-color: blue;

transform: skewX(24);



<div id="top"></div>
<div id="bottom"></div>
transform: skewX(24);

24 what?

Also, in case you don’t know how to specify degrees in CSS, it’s deg.