Created
December 19, 2018 09:06
-
-
Save zartgesotten/56df9f530fad46ab6dad669d99430001 to your computer and use it in GitHub Desktop.
Mit diesem Mittel können Bilder auch auf ungewöhnliche Formen "zugeschnitten" werden. Funktioniert leider nicht in IE (11)
Die SVG-Shape kann einfach mit einem Vektor-Programm erzeugt werden.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html class="no-js"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>CSS & SVG Clipping Demo #3</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| </head> | |
| <body> | |
| <style> | |
| .svg-clipped { | |
| -webkit-clip-path: url(#svgPath); | |
| clip-path: url(#svgPath); | |
| } | |
| </style> | |
| <img class="svg-clipped" src="flowers.jpg" alt="Cherry Blossoms."> | |
| <svg height="0" width="0"> | |
| <defs> | |
| <clipPath id="svgPath"> | |
| <path d="M229.073,17.905c0,0 91.458,-58.344 160.052,37.845c68.594,96.19 134.034,186.86 -33.114,182.918c-167.149,-3.943 -445.467,-62.287 -327.201,-122.996c118.265,-60.71 200.263,-97.767 200.263,-97.767Z" style="fill:none;stroke:#000;stroke-width:0.75px;"/> | |
| </clipPath> | |
| </defs> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment