Skip to content

Instantly share code, notes, and snippets.

@kiennt2

kiennt2/clip path hexagon rounded corners

Last active October 3, 2018 08:38
Show Gist options
  • Save kiennt2/c822170f98071fe3b515d0c2bb433952 to your computer and use it in GitHub Desktop.
Save kiennt2/c822170f98071fe3b515d0c2bb433952 to your computer and use it in GitHub Desktop.
Download ZIP
clip path hexagon rounded corners
Raw
clip path hexagon rounded corners
<svg viewBox="0 0 1024 1024" style="width:100px;height:100px">
<defs>
<clipPath id="hexagon_clip">
<path id="hexagon" d="M75.094,306.009c0-27.5,19.413-61.375,43.14-75.277L468.861,25.286c23.727-13.902,62.553-13.902,86.28,0 l350.625,205.445c23.729,13.902,43.141,47.777,43.141,75.277v412c0,27.5-19.412,61.375-43.141,75.277L555.141,998.731 c-23.727,13.901-62.553,13.901-86.28,0L118.234,793.286c-23.727-13.902-43.14-47.777-43.14-75.277V306.009z" />
</clipPath>
</defs>
<image xlink:href="http://placehold.it/100x100" x="0" y="0" width="100%" height="100%" clip-path="url(#hexagon_clip)" />
<use xlink:href="#hexagon" x="0" y="0" stroke="#000" stroke-width="20" fill="transparent" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment