Created
May 20, 2019 23:27
-
-
Save iocron/69ed9d338acc9939ab77692d5694a024 to your computer and use it in GitHub Desktop.
CSS Triangle Overlay // source https://jsbin.com/vijozob
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> | |
| <head> | |
| <meta name="description" content="CSS Triangle Overlay - Compatible with IE9+,FF,Chrome,Safari"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>CSS Triangle Overlay</title> | |
| <style id="jsbin-css"> | |
| *{ margin:0; } | |
| body { background:#eee; } | |
| a.link { position:absolute; padding:50px; } | |
| #slideshow { position:relative; overflow:hidden; } | |
| #slideshow img { display:block; width:100%; } | |
| #overlay { pointer-events:none; } | |
| #a,#b { | |
| position:absolute; bottom:0; left:0; | |
| width:100%; height:100%; | |
| transform-origin:100% 100%; | |
| transform:skew(-45deg); | |
| } | |
| #a { | |
| left:-80%; | |
| background:rgba(255,255,255,0.7); | |
| } | |
| #b { | |
| left:20%; | |
| background:rgba(255,0,0,0.7); | |
| height:50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="slideshow"> | |
| <div id="overlay"> | |
| <div id="a"></div> | |
| <div id="b"></div> | |
| </div> | |
| <a class="link" href="#">Testlink</a> | |
| <img src="https://via.placeholder.com/1920x700/09f/fff.png"> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">*{ margin:0; } | |
| body { background:#eee; } | |
| a.link { position:absolute; padding:50px; } | |
| #slideshow { position:relative; overflow:hidden; } | |
| #slideshow img { display:block; width:100%; } | |
| #overlay { pointer-events:none; } | |
| #a,#b { | |
| position:absolute; bottom:0; left:0; | |
| width:100%; height:100%; | |
| transform-origin:100% 100%; | |
| transform:skew(-45deg); | |
| } | |
| #a { | |
| left:-80%; | |
| background:rgba(255,255,255,0.7); | |
| } | |
| #b { | |
| left:20%; | |
| background:rgba(255,0,0,0.7); | |
| height:50px; | |
| }</script> | |
| </body> | |
| </html> |
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
| *{ margin:0; } | |
| body { background:#eee; } | |
| a.link { position:absolute; padding:50px; } | |
| #slideshow { position:relative; overflow:hidden; } | |
| #slideshow img { display:block; width:100%; } | |
| #overlay { pointer-events:none; } | |
| #a,#b { | |
| position:absolute; bottom:0; left:0; | |
| width:100%; height:100%; | |
| transform-origin:100% 100%; | |
| transform:skew(-45deg); | |
| } | |
| #a { | |
| left:-80%; | |
| background:rgba(255,255,255,0.7); | |
| } | |
| #b { | |
| left:20%; | |
| background:rgba(255,0,0,0.7); | |
| height:50px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment