不规则的DIV形状，跨浏览器平台支持
发布于2022-08-26 22:38 阅读(354) 评论(0) 点赞(19) 收藏(0)
我正在尝试制作一个不规则形状的 DIV，但我发现完成此操作的唯一方法是使用 polygon() 函数。不幸的是，IE 和 FF 不支持它。我不需要支持所有版本，但至少需要支持最新的 IE、FF 和 Chrome。
我想要完成的基本上是这个 - 白色和红色之间有黑色边框：
白色部分是导航菜单（主页、联系人、关于等），红色部分是内容，但是，我需要所有红色部分都是可点击的（意思是：我可以在任何地方放置链接，用户可以轻松点击...）
最终结果应如下所示：
此外，白色 div 需要保持与视口大小无关的角度，因为该站点将是响应式的。
我怎么能做到这一点？
解决方案
让我们用 a 制作倾斜的侧边栏transform：
侧边栏已给出
position: fixed并将相对于视口保持在一个位置侧边栏
transform: rotate(20deg)用于旋转它并创建一个倾斜的形状transform-origin: 100% 0%有助于将侧边栏形状定位在我们想要的位置（在此处阅读更多transform-origin信息）侧边栏中的导航
transform: rotate(-20deg)用于取消文本的旋转最大宽度/高度用于保持侧边栏的大小灵活但不会太大或太小
例子
html,
body {
margin: 0;
background: #EEE;
}
.sidebar {
height: 200%;
width: 100%;
max-width: 400px;
min-width: 250px;
display: block;
background: #FFF;
transform: rotate(20deg);
transform-origin: 100% 0%;
position: fixed;
left: 0;
top: 0;
border-right: solid 2px #000;
}
/*Demo purposes*/
.sidebar > nav {
position: absolute;
top: 100px;
left: 30%;
width: 300px;
transform: rotate(-20deg);
}
.sidebar > nav > a {
display: block;
}
.content {
background: #CCC;
text-align: right;
}<div class="sidebar">
<nav>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>
</div>
<div class="content">
I am covered by the sidebar!
</div>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/391021/e442ec5998a9d010af72/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力