Блог

Я ищу способ сделать это: https://imgur.com/j7uMWwj.jpg

Я добавляю clip-path для создания формы экрана, но я просто не вижу, как я могу добавить этот контур после формы… Контуры или границы просто не повторяют формы.

Я пробовал что-то вроде этого :

 .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%);

    amp;: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;
    }
}
  

Не работает… Я тоже пробовал с градиентами…

У кого-нибудь есть идея?

Как вы отметили в своем вопросе, границы и контуры не соответствуют контуру clip-path. Это сделано специально: » Контур обрезки концептуально эквивалентен пользовательскому видовому экрану для ссылающегося элемента. Таким образом, это влияет на визуализацию элемента, но не на внутреннюю геометрию элемента. Ограничивающий прямоугольник обрезанного элемента (имеется в виду элемент, который ссылается на элемент через свойство 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,   ");
  z-index: 1000;
  background-repeat: no-repeat;
}
  

Смотрите codepen здесь:https://codepen.io/anon/pen/KYavGq