-
-
Save tangyangzhe/8a8ea226fc213d61fe55e75dd4a6dd80 to your computer and use it in GitHub Desktop.
Beveled corners — with gradients
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
/** | |
* Beveled corners — with gradients | |
*/ | |
div { | |
background: #58a; | |
background: linear-gradient(135deg, transparent 15px, #58a 0) top left, | |
linear-gradient(-135deg, transparent 15px, #58a 0) top right, | |
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, | |
linear-gradient(45deg, transparent 15px, #58a 0) bottom left; | |
background-size: 50% 50%; | |
background-repeat: no-repeat; | |
padding: 1em 1.2em; | |
max-width: 12em; | |
color: white; | |
font: 150%/1.6 Baskerville, Palatino, serif; | |
} |
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
<div>Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div> |
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
// alert('Hello world!'); |
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
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment