如何制作响应式倾斜多边形 div？
Posted
技术标签:
【中文标题】如何制作响应式倾斜多边形 div？【英文标题】：How to make a responsive slanted polygon div? 【发布时间】：2022-01-19 10:02:06 【问题描述】：我想制作一个响应式倾斜 div，以便输出为required output 请帮忙。
【问题讨论】：
您必须提供最低工作代码以供我们任何人提供帮助。 【参考方案1】：试试这个偏差。
body
height: 100vh;
margin: 0;
background: orange;
body:before
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: blue;
transform: skew(296deg);
transform-origin: top;
<body>
<div>
</div>
</body>【讨论】：
【参考方案2】：您可以使用线性渐变背景，指定右下角的方向。这将适应不同的纵横比。
这是一个简单的例子：
*
margin: 0;
padding: 0;
.bg
background-image: linear-gradient(to right bottom, blue 0 50%, navy 50% 100%);
height: 50vh;
width: 100vw;
<div class="bg"></div>【讨论】：
以上是关于如何制作响应式倾斜多边形 div？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Bootstrap 在 Yii 框架上响应式地制作普通的 div 块？
如何使用 Responsive Filemananger 在 Ckeditor 中制作响应式图像