CSS - Clip-path在safari上不能很好地工作
CSS - Clip-path在safari上不能很好地工作
提问于 2017-06-18 22:58:01
我正在开发一个带有形状的菜单，但在safari中它不能很好地工作。在safari中，它破坏了布局，我不知道为什么。如果我不使用svg标签，而只使用css剪辑路径，那么它在safari和chrome中工作得很好，但在firefox中就不行了。
Css：
.menu {
width: 65%;
height: 40px;
background-color: red;
-webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-webkit-clip-path: url("#clipping");
clip-path: url("#clipping");
position: absolute;
right: 0px;
bottom: 0;
}
.menu:before {
content: '';
width: 99.8%;
height: 40px;
-webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-webkit-clip-path: url("#clipping");
clip-path: url("#clipping");
background: black;
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
}html：
<div class="menu">
<svg width='0' height='0'>
<defs>
<clipPath id="clipping" clipPathUnits="objectBoundingBox">
<polygon points="0.05 0, 1 0, 1 1, 0 1, 0 1" />
</clipPath>
</defs>
</svg>
</div>谢谢
回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44616289
复制相关文章
相似问题
腾讯云开发者
