<commit_before>---
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
---
## Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.

<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.

<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  --><commit_msg>Add solution to Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis (#34483)<commit_after>---
title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
---
## Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

### Solution

```html
<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>
```
{'fraction_non_alphanumeric': 0.13065693430656936, 'fraction_numerical': 0.01167883211678832, 'mean_word_length': 3.931654676258993, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 14, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3323026', 'n_tokens_mistral': 468, 'n_tokens_neox': 429, 'n_words': 142}