剪辑路径内的大纲

Question

我正在寻找一种方法：https://imgur.com/j7uMWwj.jpg

我添加一个剪辑路径来做盾形状，但我只是看不到如何在形状后面添加这个轮廓...轮廓或边框只是不遵循形状。

我试过这样的事情：

.shield_mask{
    position: relative;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);

    &:before{
        position: absolute;
        background-color: transparent;
        top: 12px; /* equal to border thickness */
        left: 12px; /* equal to border thickness */
        width: 327px; /* container height - (border thickness * 2) */
        height: 317px; /* container height - (border thickness * 2) */
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
        clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);

        -webkit-box-shadow:inset 1px 1px 0 0 #FFF;
        box-shadow:inset 1px 1px 0 0 #FFF;
    }
}

不工作......我也试过渐变...

有没有人有想法？

Answer 1

正如您在问题中所述，边框和轮廓不遵循剪辑路径轮廓。这是设计的：“剪切路径在概念上等同于引用元素的自定义视口。因此，它影响元素的渲染，但不影响元素的固有几何。剪切元素的边界框（意思是元素）它通过clip-path属性引用元素，或者引用元素的子元素）必须保持与未被剪裁的相同。“ - developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

---

我不相信只用CSS就可以实现这一点。但是可以用CSS和SVG来做。它有点手动和繁琐，但基本上你需要创建一个模仿你所追求的插入边框的SVG，并将其作为伪元素叠加在带有背景图像的div上。

根本不是你想要做的，但它在视觉上模仿你所追求的外观。

希望另一个贡献者会用一些CSS魔法让我们惊叹，但在那之前，如果你真的需要编写代码，你可以尝试类似下面的内容......

HTML

<div class="shield_mask" style="background-image: url(http:placehold.it/200x300)" " alt=" ">
</div>

CSS

.shield_mask {
  width: 200px;
  height: 300px;
  display: block;
  position: relative;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.shield_mask::after {
  content: "";
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='300' viewBox='0 0 200 300' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13H188V259.233L103.01 286.045L12 259.248V13ZM14 15V257.752L102.99 283.955L186 257.767V15H14Z' fill='white'/%3E %3C/svg%3E ");
  z-index: 1000;
  background-repeat: no-repeat;
}

请参阅codepen：https://codepen.io/anon/pen/KYavGq