Created
March 6, 2022 08:03
-
-
Save harrytran998/5669e67381bd5ee9d43bce03d7691d4a to your computer and use it in GitHub Desktop.
Use SVG like the background image
This file contains 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
| .box { | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" ><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23ad3" /><stop offset="100%" stop-color="%23add" /></linearGradient></defs><path d="M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z" fill="url(%23grad)"/></svg>'), | |
| linear-gradient(to bottom right, #de350b, #0065ff); | |
| } |
This file contains 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
| .box { | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="none"><path d="M0 56 C30 28 38 34 64 26 L64 0 L0 0 Z" fill="red"/></svg>') top/100% 80% no-repeat, | |
| linear-gradient(to bottom right, #FFF, blue); | |
| height:400px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment