Контур внутри клипа - PullRequest
Новая
       20

Контур внутри клипа

0 голосов
/ 09 апреля 2019

Я ищу способ сделать это: 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;
    }
}

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

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

1 Ответ

0 голосов
/ 09 апреля 2019

Как вы отметили в своем вопросе, границы и контуры не соответствуют контуру пути клипа.Это сделано по замыслу: «Обтравочный контур концептуально эквивалентен пользовательскому окну просмотра для ссылочного элемента. Таким образом, он влияет на рендеринг элемента, но не на внутреннюю геометрию элемента. Ограничительная рамка обрезанного элемента (то есть элементакоторый ссылается на элемент через свойство 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;
}

См. Кодовое обозначение здесь: https://codepen.io/anon/pen/KYavGq

...