0

I'm working with clip path for the first time and i need to add a border in this shape. Anyone can explain me how to do that?

.image-center {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.shape {
  width: 300px;
  height: 300px;
  -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
  clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
}
img {
  width: 300px;
  height: 300px;
}
<div class="image-center">
  <div class="shape">
    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" />
  </div>
</div>
Persijn
  • 14,624
  • 3
  • 43
  • 72
user3242861
  • 1,839
  • 12
  • 48
  • 93
  • 1
    Duplicate of [this](http://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style) SO question – Jeroen Heier Sep 15 '16 at 16:42

1 Answers1

3

You can fake it with several drop shadow filters. There isn't much support, but cli path doesn't have much either ...

.image-center {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  -webkit-filter: drop-shadow(2px 2px 0px red)
    drop-shadow(2px -2px 0px red)
    drop-shadow(-2px 2px 0px red)
    drop-shadow(-2px -2px 0px red);
  filter: drop-shadow(2px 2px 0px red)
    drop-shadow(2px -2px 0px red)
    drop-shadow(-2px 2px 0px red)
    drop-shadow(-2px -2px 0px red);
}
.shape {
  width: 300px;
  height: 300px;
  -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
  clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
}
img {
  width: 300px;
  height: 300px;
}
<div class="image-center">
  <div class="shape">
    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" />
  </div>
</div>
vals
  • 61,425
  • 11
  • 89
  • 138
  • thank's. How can i do that in firefox also? What is the best solution to present ways that are compatible to the major browsers? @vals – user3242861 Sep 16 '16 at 10:28
  • Happy that it helped. You can get much better support using SVG. There is also a better way to get the border effects if you use SVG. See in the question linked by Jeroen Heier the second answer – vals Sep 16 '16 at 17:41