在html中插入路径的编辑,如何在我的剪辑路径中添加边框：polygon(); CSS样式

最新推荐文章于 2024-05-28 10:21:12 发布

weixin_39530839

最新推荐文章于 2024-05-28 10:21:12 发布

阅读量293

点赞数

文章标签：在html中插入路径的编辑

边框可以沿剪辑路径应用到剪辑的元素吗？

否,向剪辑的元素添加边框属性将不会应用剪裁路径的边框,因为在应用剪辑路径之前将边框应用于原始矩形(或方形)容器,因此也会被剪切掉.您可以在下面的代码片段中看到这一点：

div {

display: inline-block;

height: 200px;

width: 200px;

border: 3px solid;

background: darkseagreen;

}

div + div {

-webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%);

}

是否有替代方式来创建这样的边界效应？

我们可以通过在容器元素上应用相同的剪辑路径来模拟它.容器元素的背景颜色将看起来像内部元素的边框,因为它们都被剪切,并且容器的尺寸比内部元素略高.

.poligon {

display: inline-block;

position: relative;

width: 150px;

height: 150px;

background: red;

box-sizing: border-box;

-webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);

-moz-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);

}

.poligon img {

position: absolute;

top: 2px; /* equal to border thickness */

left: 2px; /* equal to border thickness */

width: 146px; /* container height - (border thickness * 2) */

height: 146px; /* container height - (border thickness * 2) */

}

为什么上述在Firefox中不起作用？

如注释所述,Firefox currently supports only the url(...) syntax用于剪辑路径,它需要一个SVG路径(内联或外部)作为输入.与CSS语法相比,SVG剪辑路径并不是很大,可以轻松创建.我们需要做的就是使用带多边形的SVG clipPath元素.多边形的点需要作为分数而不是百分比来提供.

.poligon {

display: inline-block;

position: relative;

width: 150px;

height: 150px;

background: red;

box-sizing: border-box;

-webkit-clip-path: url(#clipper);

-moz-clip-path: url(#clipper);

clip-path: url(#clipper);

}

.poligon img {