JSFiddle - React, Tailwind, and code Playground

by Jens Kühn

HTML

<section>
  <img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg?w=996&t=st=1690523540~exp=1690524140~hmac=08edb1f679708453a7713b10919ccc8a3a51f93b6cb4f9dcc5491b53198f2758" alt="Bild">
</section>

<svg width="0" height="0">
  <clipPath id="hexagon" clipPathUnits="objectBoundingBox">
    <path d="M1.54 288v324.52a117.34 117.34 0 0 0 58.68 101.62l281 162.24a117.31 117.31 0 0 0 117.35 0l281-162.24a117.34 117.34 0 0 0 58.68-101.62V288a117.35 117.35 0 0 0-58.68-101.63l-281-162.24a117.36 117.36 0 0 0-117.35 0l-281 162.24A117.35 117.35 0 0 0 1.54 288z" />
  </clipPath>
</svg>

<img src="https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg?w=996&t=st=1690523540~exp=1690524140~hmac=08edb1f679708453a7713b10919ccc8a3a51f93b6cb4f9dcc5491b53198f2758" />
<svg width="0" height="0">
	<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
  <path stroke="grey" stroke-width="0.8" fill="none" d="M79.67433714816835 11.999999999999998Q100.45894683899488 0 121.2435565298214 12L180.13328398716322 46Q200.91789367798975 58 200.91789367798975 82L200.91789367798975 150Q200.91789367798975 174 180.13328398716322 186L121.2435565298214 220Q100.45894683899488 232 79.67433714816835 220L20.784609690826528 186Q0 174 0 150L0 82Q0 58 20.784609690826528 46Z"></path>
	</clipPath>
</svg>

SCSS

section {
  position: relative;
  width: 200px;
  /* Breite des Bildes */
  aspect-ratio: 1 / .866;
  /* Die Höhe wird berechnet, um ein gleichseitiges 6-Eck zu erstellen */
  overflow: hidden;

  img {
    display: block;
    width: 5em;
    height: 5em;
    clip-path: url("#hexagon");
	object-fit: cover;
	display: block;
	margin-right: auto;
	margin-left: auto;
  }
}

#hexagon {
}

img {
  clip-path: url(#svgClip);
	width: 18em;
	height: 18em;
	object-fit: cover;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
svg {
  filter: drop-shadow(rgba(255, 255, 255, 1) 0px 0px 10px);
}