0

How can I clip image with an outline?

I am using the guide from here.

css:

clip-polygon {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  border: 10px solid red;
}

HTML:

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="clip-polygon">

Result:

enter image description here

It the border/ outline does not follow the clipped shape at all.

Is it achievable?

Also, how can I clip with more curved like pebbles, something like:

enter image description here

Run
  • 54,938
  • 169
  • 450
  • 748
  • 1
    Perhaps http://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style/31854299#31854299 would help. – Rick Hitchcock Feb 09 '17 at 21:04
  • Possible duplicate of [How to add border in my clip-path: polygon(); CSS style](http://stackoverflow.com/questions/31854185/how-to-add-border-in-my-clip-path-polygon-css-style) – Asons Feb 11 '17 at 13:11

0 Answers0