Beispiel:Clip-path-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html> <head> <meta charset="utf-8"> <title>clip-path - 4</title> <style> nav { overflow: visible; }

nav ul { 

 display: flex;
 list-style: none;
 align-items: flex-end;
 gap: 0.5em;
 overflow: visible; /* ← allow the curve to bleed outside */

}

nav li { 

 margin-right: -2em;
 overflow: visible; /* ← same on the li */

}

nav a { 

 display: block;

position: relative; 

 padding: 0.45em calc(1.1em + 2em) 0.45em 1.1em;
 text-decoration: none;
 color: navy;
 background: skyblue;
 transition: background 0.15s, color 0.15s;

 --ear: 2em;
 --radius: .75em;
 clip-path: shape(
   from 0% 100%,
   line to 0% var(--radius),
   curve to var(--radius) 0% with 0% 0%,
   line to calc(100% - var(--ear) - var(--radius)) 0%,
   curve to calc(100% - var(--ear)) var(--radius) with calc(100% - var(--ear)) 0%,
   line to calc(100% - var(--ear)) 50%,
   curve to 100% calc(50% + var(--radius)) with calc(100% - var(--ear)) calc(50% + var(--radius)),
   curve to calc(100% + var(--ear)) 100% with 100% calc(50% + var(--radius)),
   close
 );

z-index:1;

}

[aria-current]{ background:steelblue; color: gold; z-index:2; }

nav a:hover, nav a:focus { background: navy; color: skyblue; border-color: navy; z-index:10; }

  • { box-sizing: border-box; margin: 0; padding: 0; }

body { padding:2em; font-size: 1rem; }


</style> </head> <body> 

   <nav>
  • <a href="#" aria-current="page">Grundlagen</a>
  • <a href="#">Beispiele</a>
  • <a href="#">Referenz</a>
  • <a href="#">Über uns</a>
   </nav>

</body> </html>

Abgerufen am 24.05.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Clip-path-4.html"