Created
March 19, 2016 16:24
-
-
Save pixiebox/208d0b17725c3883c1a9 to your computer and use it in GitHub Desktop.
responsive-arrow
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Responsive arrow</title> | |
| <style> | |
| div { | |
| background: #eb7261; | |
| position: relative; | |
| height: 200px; | |
| max-width: 600px; | |
| width: 100%; | |
| } | |
| div:before, | |
| div:after { | |
| content: ''; | |
| height: 25px; | |
| position: absolute; | |
| top: 100%; | |
| width: 50%; | |
| } | |
| div:before { | |
| background: transparent; | |
| background: -webkit-linear-gradient(left bottom, transparent 50%, #eb7261 50%); | |
| background: linear-gradient(to right top, transparent 50%, #eb7261 50%); | |
| left: 0px; | |
| } | |
| div:after { | |
| background: transparent; | |
| background: -webkit-linear-gradient(right bottom, transparent 50%, #eb7261 50%); | |
| background: linear-gradient(to left top, transparent 50%, #eb7261 50%); | |
| right: 0px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment