Erstelle dir Formen ein Backgrundbild in verschiedene Formen angezeigt werden kann. Das Tool erstellt einen CSS Code, den man in der CSS Datei eintragen muss
Code
<!DOCTYPE html>
<html class="insetting">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/css_webseite/clipmaker.css" />
<meta name="viewport" content="width=device-width" />
</head>
<div class="main">
<header class="fade-content">
CSS clip-path maker
</header>
<div class="demo-container fade-content">
<section class="demo">
<div id="box" class="box">
<div class="shadowboard"></div>
<div class="clipboard"></div>
<div class="handles"></div>
</div>
<div class="custom-notice">
<div>
<span class="touchy"></span> to add points<br />to
custom polygon.
</div>
</div>
</section>
</div>
<section id="flickity" class="shapes horizontal gallery">
<ul></ul>
</section>
<section class="clip-path" tabindex="-1">
<div class="css-code code fade-content">
<code class="webkit block"
>-webkit-clip-path: <span class="functions"></span>;</code
>
<code class="unprefixed block show"
>clip-path: <span class="functions"></span>;</code
>
</div>
<button class="edit-in-codepen code"></button>
</section>
</div>
<div class="side">
<section class="dark-panel inset">
<div class="flex">
<h2>Round edges</h2>
<input value="5% 20% 0 10%" class="inset-round" type="text" />
</div>
<p>
The <code>inset()</code> shape optionally allows values similar
to <code>border-radius</code> for rounded edges. This new
feature may be buggy in
<span class="your-browser">your browser</span>.
</p>
</section>
<section class="dark-panel custom">
<h2>Custom shape</h2>
<button class="finish"></button>
</section>
<section class="shapes vertical" tabindex="-1"><ul></ul></section>
<section class="options">
<div class="grid panel flex fade-content">
<h2>Prefix</h2>
<input
name="prefix"
value="5"
type="checkbox"
id="webkit"
checked=""
/><label for="webkit">webkit</label>
</div>
<div class="grid panel flex fade-content">
<h2>Demo Size</h2>
<input id="demo_width" value="280" type="number" />
<h2>×</h2>
<input id="demo_height" value="280" type="number" />
</div>
<div class="grid panel fade-content">
<h2>Demo Background</h2>
<div class="backgrounds">
<img src="/image/pittsburgh.jpg" />
<img src="/image/fierenze.jpg" />
<img src="/image/sparkler.jpg" /> <img src="/image/miami.jpg" />
</div>
<input
placeholder="Custom URL..."
id="custom_url"
type="url"
name="background"
/><style id="custom_background"></style>
<div class="flex shadowboard-toggle">
<h2>Show outside clip-path</h2>
<input
name="prefix"
type="checkbox"
id="shadowboard-toggle"
/><label class="joined" for="shadowboard-toggle"></label>
</div>
<h3><a href="https://github.com/bennettfeely/clippy">Dieses Tool kann man direkt beim Github Downloaden</a></h3> </div>
</section>
</div>
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/draggabilly.min.js"></script>
<script src="/js_webseite/flickity.pkgd.min.js"></script>
<script src="/js_webseite/clip.js"></script>
<script src="/js_webseite/clip-min.js"></script>
</html>