Outline inside clip-path - css

Question

I'm looking for a way to do this:
https://imgur.com/j7uMWwj.jpg
I add a clip-path to do the shield shape, but I just don't see how I can add this outline following the shape... Outlines or borders just do not follow shapes.
I tried something like this :
.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;
}
}
Not working... I tried with gradients too...
Does anyone have an idea ?

Answer 1

As you noted in your question, borders and outlines do not follow the clip-path outline. This is by design: " A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element's inherent geometry. The bounding box of a clipped element (meaning, an element which references a element via a clip-path property, or a child of the referencing element) must remain the same as if it were not clipped." -- developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
I don't believe it's possible to accomplish this with CSS alone. But it is possible to do it with CSS and SVG. It's a bit manual and fiddly, but essentially you would need to create an SVG that mimics the inset border you're after and overlay it as a pseudo element on a div with a background image.
Not at all what you were trying to do, but it visually mimics the look you're after.
Hopefully, another contributor will wow us with some CSS wizardry, but until then, if you just really need to get it coded, you can try something like the following...
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;
}
See codepen here: https://codepen.io/anon/pen/KYavGq