Sechseckige Bilder |
| So sieht´s aus |
|
| Quellcode |
|
<html>
<head> <style type="text/css"> .hex {display: block; margin: 0 auto; position: relative; width: 320px; height: 277.12px; background: red; box-sizing: border-box; -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);} .hex-background {position: absolute; background-color: blue; left: 2px; width: 318px; height: 275.12px; -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);} .hex img {position: relative; width: 100%; height: 100%; object-fit: cover; -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);} </style> </head> <body> <div class="hex"> <div class="hex-background"> <img src="../Bilder/Bergsee.jpg"> </div> </div> </body> </html> |
Kontakt Datenschutz Impressum |