使用css制作矩形对角div答案

【问题标题】：Make rectangle diagonal div using css使用css制作矩形对角div
【发布时间】：2021-06-22 05:23:35
【问题描述】：

我想制作一个矩形 div（如下视频后面所示）并使用 CSS 旋转 35 度。我想让它响应。

【问题讨论】：

标签： html css bootstrap-4 responsive-design

【解决方案1】：

只需使用transform: rotate(35deg)

.rect {
  height: 150px;
  width: 300px;
  background-image: linear-gradient(to right, rgba(0,255,0,1), rgba(0,255,0,0.3));
  transform: rotate(35deg) translate(-10px, 100px);
  border-radius: 0 0 50px 0;
}

&lt;div class="rect"&gt;&lt;/div&gt;

【讨论】：

谢谢 Ibram，一切正常。但是如果我旋转到 157 度，例如：transform: translate(4%,10px) rotate(157deg);它增加了屏幕宽度，内容超出了屏幕尺寸。有什么办法可以适应屏幕尺寸？
@kinaliligandhi 使用position: absolute 或使用应用溢出属性的容器，例如overflow: hidden
kinaliligandhi 请使用您尝试执行的代码更新问题以获得更多帮助......但一般来说，您可以尝试@F.Müller提供的解决方案，如果您需要隐藏它会正常工作屏幕外的任何船只
非常感谢您对@IbramReda 的回复。它按预期工作。