CSS Clip-Path Generator — Shape Builder

<!-- Shape Type -->
<div>
  <div class="cp-section-label">Shape Type</div>
  <div class="cp-shape-tabs">
    <button class="cp-tab active" data-type="polygon" onclick="cpSetType('polygon')">Polygon</button>
    <button class="cp-tab" data-type="circle" onclick="cpSetType('circle')">Circle</button>
    <button class="cp-tab" data-type="ellipse" onclick="cpSetType('ellipse')">Ellipse</button>
    <button class="cp-tab" data-type="inset" onclick="cpSetType('inset')">Inset</button>
    <button class="cp-tab" data-type="custom" onclick="cpSetType('custom')">Custom</button>
  </div>
</div>

<!-- Polygon Presets (shown when type=polygon) -->
<div id="cp-polygon-panel">
  <div class="cp-section-label">Preset Shapes</div>
  <div class="cp-presets-grid">
    <button class="cp-preset-btn active" data-preset="triangle" onclick="cpLoadPreset('triangle')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,4 30,28 2,28" fill="#667eea"/></svg>
      Triangle
    </button>
    <button class="cp-preset-btn" data-preset="diamond" onclick="cpLoadPreset('diamond')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,2 30,16 16,30 2,16" fill="#667eea"/></svg>
      Diamond
    </button>
    <button class="cp-preset-btn" data-preset="pentagon" onclick="cpLoadPreset('pentagon')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,2 29,11 24,27 8,27 3,11" fill="#667eea"/></svg>
      Pentagon
    </button>
    <button class="cp-preset-btn" data-preset="hexagon" onclick="cpLoadPreset('hexagon')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,2 28,9 28,23 16,30 4,23 4,9" fill="#667eea"/></svg>
      Hexagon
    </button>
    <button class="cp-preset-btn" data-preset="octagon" onclick="cpLoadPreset('octagon')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="10,2 22,2 30,10 30,22 22,30 10,30 2,22 2,10" fill="#667eea"/></svg>
      Octagon
    </button>
    <button class="cp-preset-btn" data-preset="star" onclick="cpLoadPreset('star')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="16,2 19.5,12 30,12 21.5,18.5 24.5,29 16,22.5 7.5,29 10.5,18.5 2,12 12.5,12" fill="#667eea"/></svg>
      Star
    </button>
    <button class="cp-preset-btn" data-preset="arrow" onclick="cpLoadPreset('arrow')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="2,10 18,10 18,4 30,16 18,28 18,22 2,22" fill="#667eea"/></svg>
      Arrow
    </button>
    <button class="cp-preset-btn" data-preset="cross" onclick="cpLoadPreset('cross')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="10,2 22,2 22,10 30,10 30,22 22,22 22,30 10,30 10,22 2,22 2,10 10,10" fill="#667eea"/></svg>
      Cross
    </button>
    <button class="cp-preset-btn" data-preset="heart" onclick="cpLoadPreset('heart')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><path d="M16,28 C16,28 3,18 3,10 C3,6 6,3 10,3 C12.5,3 15,5 16,7 C17,5 19.5,3 22,3 C26,3 29,6 29,10 C29,18 16,28 16,28Z" fill="#667eea"/></svg>
      Heart
    </button>
    <button class="cp-preset-btn" data-preset="chevron" onclick="cpLoadPreset('chevron')">
      <svg class="cp-preset-icon" viewBox="0 0 32 32"><polygon points="2,6 18,6 30,16 18,26 2,26 14,16" fill="#667eea"/></svg>
      Chevron
    </button>
  </div>
</div>

<!-- Circle controls -->
<div id="cp-circle-panel" style="display:none">
  <div class="cp-section-label">Circle Settings</div>
  <div class="cp-slider-row">
    <label>Radius</label>
    <input type="range" id="cp-circle-r" min="10" max="50" value="50" oninput="cpUpdateCircle()">
    <span class="cp-slider-val" id="cp-circle-r-val">50%</span>
  </div>
  <div class="cp-slider-row">
    <label>Center X</label>
    <input type="range" id="cp-circle-cx" min="0" max="100" value="50" oninput="cpUpdateCircle()">
    <span class="cp-slider-val" id="cp-circle-cx-val">50%</span>
  </div>
  <div class="cp-slider-row">
    <label>Center Y</label>
    <input type="range" id="cp-circle-cy" min="0" max="100" value="50" oninput="cpUpdateCircle()">
    <span class="cp-slider-val" id="cp-circle-cy-val">50%</span>
  </div>
</div>

<!-- Ellipse controls -->
<div id="cp-ellipse-panel" style="display:none">
  <div class="cp-section-label">Ellipse Settings</div>
  <div class="cp-slider-row">
    <label>Radius X</label>
    <input type="range" id="cp-ellipse-rx" min="5" max="50" value="50" oninput="cpUpdateEllipse()">
    <span class="cp-slider-val" id="cp-ellipse-rx-val">50%</span>
  </div>
  <div class="cp-slider-row">
    <label>Radius Y</label>
    <input type="range" id="cp-ellipse-ry" min="5" max="50" value="30" oninput="cpUpdateEllipse()">
    <span class="cp-slider-val" id="cp-ellipse-ry-val">30%</span>
  </div>
  <div class="cp-slider-row">
    <label>Center X</label>
    <input type="range" id="cp-ellipse-cx" min="0" max="100" value="50" oninput="cpUpdateEllipse()">
    <span class="cp-slider-val" id="cp-ellipse-cx-val">50%</span>
  </div>
  <div class="cp-slider-row">
    <label>Center Y</label>
    <input type="range" id="cp-ellipse-cy" min="0" max="100" value="50" oninput="cpUpdateEllipse()">
    <span class="cp-slider-val" id="cp-ellipse-cy-val">50%</span>
  </div>
</div>

<!-- Inset controls -->
<div id="cp-inset-panel" style="display:none">
  <div class="cp-section-label">Inset Settings</div>
  <div class="cp-inset-grid">
    <div class="cp-slider-row" style="flex-direction:column;align-items:flex-start;gap:0.2rem">
      <label>Top</label>
      <input type="range" id="cp-inset-t" min="0" max="49" value="10" oninput="cpUpdateInset()">
      <span class="cp-slider-val" id="cp-inset-t-val" style="min-width:auto">10%</span>
    </div>
    <div class="cp-slider-row" style="flex-direction:column;align-items:flex-start;gap:0.2rem">
      <label>Right</label>
      <input type="range" id="cp-inset-r" min="0" max="49" value="10" oninput="cpUpdateInset()">
      <span class="cp-slider-val" id="cp-inset-r-val" style="min-width:auto">10%</span>
    </div>
    <div class="cp-slider-row" style="flex-direction:column;align-items:flex-start;gap:0.2rem">
      <label>Bottom</label>
      <input type="range" id="cp-inset-b" min="0" max="49" value="10" oninput="cpUpdateInset()">
      <span class="cp-slider-val" id="cp-inset-b-val" style="min-width:auto">10%</span>
    </div>
    <div class="cp-slider-row" style="flex-direction:column;align-items:flex-start;gap:0.2rem">
      <label>Left</label>
      <input type="range" id="cp-inset-l" min="0" max="49" value="10" oninput="cpUpdateInset()">
      <span class="cp-slider-val" id="cp-inset-l-val" style="min-width:auto">10%</span>
    </div>
  </div>
  <div class="cp-slider-row" style="margin-top:0.5rem">
    <label>Border Radius</label>
    <input type="range" id="cp-inset-br" min="0" max="50" value="0" oninput="cpUpdateInset()">
    <span class="cp-slider-val" id="cp-inset-br-val">0%</span>
  </div>
</div>

<!-- Custom polygon panel -->
<div id="cp-custom-panel" style="display:none">
  <div class="cp-section-label">Custom Polygon</div>
  <div class="cp-custom-hint">
    Click on the preview area to add points. Drag points to move them. Right-click a point to delete it.
  </div>
  <div class="cp-custom-actions" style="margin-top:0.6rem">
    <button class="cp-btn cp-btn-outline" onclick="cpUndoPoint()">Undo</button>
    <button class="cp-btn cp-btn-danger" onclick="cpClearPoints()">Clear All</button>
  </div>
  <div class="cp-points-list" id="cp-points-list">No points yet — click preview to start.</div>
</div>

<!-- Background color -->
<div>
  <div class="cp-section-label">Preview Options</div>
  <div class="cp-color-row">
    <label>Shape Color</label>
    <input type="color" id="cp-shape-color" value="#667eea" oninput="cpUpdateColor()">
  </div>
</div>