Program & Coding/Visual design
Visual design. Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
포니라이더
2021. 10. 26. 00:02
Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
Given that the skewX() function skews the selected element along the X-axis by a given degree, it is no surprise that the skewY() property skews an element along the Y (vertical) axis.
Skew the element with the id of top -10 degrees along the Y-axis by using the transform property.
<style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
transform: skewY(-10deg);
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
</style>
<div id="top"></div>
<div id="bottom"></div>