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/zh-CN/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

在剪切路径中大纲

1 个答案: