Image clipping using clip-path (SVG polygon)

~Source~ Shape maker: https://bennettfeely.com/clippy/ https://www.cssportal.com/css-clip-path-generator/ http://www.cssplant.com/clip-path-generator Filter function: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function shape inspiration: https://codepen.io/thebabydino/pen/XbxKbL https://bashooka.com/coding/18-css-clip-path-tutorials-examples-tools/

by Roberto Apasajja

HTML

<h2>Hexagon with shadow</h2>
<div class="one">
  <img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg">
</div>

<h2>Hexagon with blur</h2>
<div class="two">
  <img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg">
</div>

<h2>Hexagon another shape</h2>
<div class="three">
  <img src="https://bennettfeely.com/clippy/pics/pittsburgh.jpg">
</div>

CSS

.one img {
  width: 200px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.one {
  filter: drop-shadow(0 8px 13px rgba(0, 0, 0, 0.5));
}

.two img {
  width: 200px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.two {
  filter: blur(9px);
}

.three img {
  width: 200px;
  clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385% 56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404% 90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5% 88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384% 53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%, 24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296% 8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
}