Creative Dissection Puzzles with CSS and SVG

index.html

<h2 class="team-header">Awesome Team</h2>

<div class="team-member">
    <div class="clip-container clip-pentagon">
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
    </div>
    <div class="team-member-name">Elizabeth</div>
    <div class="team-member-position">Project Leader</div>
</div>

<div class="team-member">
    <div class="clip-container clip-hexagon">
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
    </div>
    <div class="team-member-name">Daniel</div>
    <div class="team-member-position">Senior Designer</div>
</div>

<div class="team-member">
    <div class="clip-container clip-octagon">
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
    </div>
    <div class="team-member-name">Alice</div>
    <div class="team-member-position">Developer</div>
</div>