Clip-path image - нужна прозрачная рамка на изображении - PullRequest
Новая
       64

Clip-path image - нужна прозрачная рамка на изображении

0 голосов
/ 10 июня 2018

У меня есть изображение в форме шестиугольника, к которому я хотел бы применить твердую границу rgba (0, 0, 0, .141) размером 2px.Граница должна быть на изображении, а не за ее пределами.Вот код, который у меня есть для формы.

img{
    position: absolute;
    height: 75px;
    width: 67px;
    top: 25px;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }

Любая поддержка для лучшего способа это было бы здорово!

1 Ответ

0 голосов
/ 10 июня 2018

Вы можете взглянуть на mix-blend-mode (используя псевдо для создания эффекта blend-mode) , если ваш браузер его поддерживает: 

div {
  position: relative;
  height: 75px;
  width: 67px;
  
}

div::before,
div::after,
div img {
  position:absolute;
  height:100%;
  width:100%;
    top:0;
  left:0;
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
div::before,
div::after {
  z-index:1;
  content:"";
  background:rgba(0,0,0, .141) ;
  
}
div::before {
  height:61px;
  width:54px;
  top:7px;
  left:7px;
  background:rgba(255,255,255,0.5);
  mix-blend-mode:overlay;
}
<div>
  <img src="https://images.freeimages.com/images/premium/thumbs/3249/3249390-freestyle-man.jpg">
</div>
  original image
  <img src="https://images.freeimages.com/images/premium/thumbs/3249/3249390-freestyle-man.jpg">

На мой взгляд, это работа SVG;)

...