css - 如何在响应式页面里做一个不规则四边形。

问题描述

问 题

如下图，中间白色背景的四边形，在窗口放大缩小的时候布局（指这个图片的整个中间内容部分，不包括头部和底部）也如下图不变

：

解决方案

额 我本来想评论的 放错了
你说的是中间那一块吗 白色区域

试了一下
用transform可以实现

 .city {
            margin-left: 100px;
            display: inline-block;
            padding:60px 100px;
            border: 1px solid #44a5fc;
            color: #333333;
            transform: skew(-20deg);
        }

文字倾斜的问题
你可以在里边再加div将文字放里边
设置样式：

.city div {
  transform: skew(20deg);
}

就可以了

这篇关于css - 如何在响应式页面里做一个不规则四边形。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！