我有一个用clip-path
切成的容器,并且具有一些背景颜色。在支持clip-path
但支持移动Safari的所有浏览器中均可完美运行(可能也是台式机Safari,无法测试)。
https://codepen.io/Deka87/pen/PXVNgQ
HTML:
<!-- Container -->
<div></div>
<!-- Clip -->
<svg>
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M 0 0 V 1 A 5 5 0 0 1 1 1 V 0 Z"></path>
</clipPath>
</defs>
</svg>
CSS:
div {
min-height: 300px;
background-color: gray;
padding: 100px 0;
-webkit-clip-path: url(#clip);
clip-path: url(#clip);
}
svg {
width: 0;
height: 0;
position: absolute;
}
Safari中的问题是,当应用clip-path
时,容器的背景就像其background-clip
属性设置为content-box
一样,即它没有位于填充的后面区域保持空白。
任何帮助将不胜感激。
答案 0 :(得分:0)
我遇到了同样的问题,并且可以通过向要裁剪的元素添加一个额外的包装div并将填充移入一个子元素来解决该问题。这并不是真正的解决办法,但让我向前迈进了一步。
HTML:
<!-- Container -->
<div class="parent">
<div class="child">
</div>
</div>
<!-- Clip -->
<svg>
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M 0 0 V 1 A 5 5 0 0 1 1 1 V 0 Z"></path>
</clipPath>
</defs>
</svg>
CSS:
.parent {
-webkit-clip-path: url(#clip);
clip-path: url(#clip);
}
.child {
background-color: gray;
min-height: 300px;
padding: 100px 0;
}
svg {
width: 0;
height: 0;
position: absolute;
}
在此处查看示例: https://codepen.io/mprquinn/pen/8b1e4e6004e989491f294a8899a94ec7
希望这会有所帮助!