css - 带有边缘的可扩展剪辑路径多边形
问题描述
似乎 Edge 不处理剪辑路径多边形。如何使用 Edge 进行这项工作?
.background {
background-color: grey;
}
.content {
background: yellow;
height: 240px;
display: flex;
justify-content: center;
align-items: center;
clip-path: polygon(0 0, 100% 0, 100% 95%, 0 85%);
}
<div class="background">
<div class="content">
<h1>
Content
</h1>
</div>
</div>
解决方案
将其替换为背景颜色:
.background {
background-color: grey;
}
.content {
height: 240px;
display: flex;
justify-content: center;
align-items: center;
position:relative;
z-index:0;
}
.content:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:5%;
background:
linear-gradient(yellow,yellow) top /100% 90%,
linear-gradient(to top right,transparent 48%,yellow 50%) bottom/100% 10%;
background-repeat:no-repeat;
}
<div class="background">
<div class="content">
<h1>
Content
</h1>
</div>
</div>
推荐阅读
- python - 不能让 id 在 Python 中工作!Kivy 新手需要帮助
- java - 已部署的 .war 生成错误:模板可能不存在或可能无法访问
- python - Python Coinbase Pro API 类函数参数不起作用
- javascript - React Router 中的过滤器功能问题
- azure-functions - 将创建的 excel 文件保存到 azure blob 容器。路径问题
- css - CSS - 页面第一类元素的不同样式
- embedded - STM32 引导加载程序
- r - 如何通过R中的不同排列找到总频率?
- python - 删除最右边节点时的 DFS 递归问题
- django - 从 Django REST API 检索多个对象