如何让旋转后的粉色div占满屏幕宽度且无横向滚动条？

我想要制作一个粉色的div并使其向右倾斜，但设置后该div无法占满屏幕宽度。我已将body的margin和padding设为0，但问题仍未解决。使用的代码如下：

HTML代码：

<html>
<div class="parent">
   <div class="backgroundColor"></div>
</div>
</html>

CSS代码：

.body{
   margin: 0px;
   padding: 0px;
}

.backgroundColor{
   width: 100%;
   height: 160px;
   margin: 100px 0px 0px 0px;
   background-color: pink;
   transform: rotate(-9deg);
}

此时div的右上角和左下角无法填满屏幕，请问如何实现div占满屏幕宽度且底部不出现横向滚动条？

问题核心是transform: rotate会让元素围绕中心点旋转，原本100%宽度的元素旋转后边缘无法覆盖全屏，还可能触发横向滚动条。按以下步骤调整即可解决：

1. 修正body选择器
   你写的.body是类选择器，但body是HTML标签，应该用body标签选择器，否则重置内外边距的样式不会生效。

2. 添加父容器裁剪
   给.parent设置overflow: hidden，这样旋转元素超出容器的部分会被裁剪，不会出现横向滚动条。

3. 加宽并调整旋转元素
   给.backgroundColor设置大于100%的宽度，配合transform-origin调整旋转原点，再通过负边距偏移位置，确保旋转后能完全覆盖屏幕宽度。

修改后的完整代码：

<html>
<body>
  <div class="parent">
     <div class="backgroundColor"></div>
  </div>
</body>
</html>

body{
   margin: 0;
   padding: 0;
}

.parent{
   overflow: hidden;
   margin-top: 100px;
}

.backgroundColor{
   width: 120%;
   height: 160px;
   background-color: pink;
   transform: rotate(-9deg);
   transform-origin: bottom left;
   margin-left: -10%;
}

如果不想用旋转，也可以用clip-path实现倾斜效果，代码示例：

.backgroundColor{
   width: 100%;
   height: 160px;
   background-color: pink;
   clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 85%);
}

内容的提问来源于stack exchange，提问作者Jasir Limani