HTML CSS examples for CSS Widget:Arrow
Make a css triangle/arrow grow when its parent div is resized
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w ww .j av a 2s . c o m--> padding: 10px; } * { box-sizing: border-box; } .box { padding: 10px; width: 500px; position: relative; background: blue; } .box:before { content: ''; display: block; width: 100%; height: 100%; border: 1px solid #000; position: absolute; top: 0; left: 0; box-sizing: border-box; border-right: solid -0px transparent; } .u-prop { position: absolute; height: 50%; width: 100%; top: 0; left: 100%; } .u-prop.is--bot { top: 50%; } .u-prop.is--bot .proportional { transform: rotate(-45deg); transform-origin: bottom left; } .u-prop.is--bot .proportional:before { border-bottom: 1px solid #000; border-top: none; } .u-prop .spacer { width: auto; max-height: 100%; visibility: hidden; } .u-prop .proportional { position: absolute; top: 0; left: 0px; width: 150%; height: 0; padding-bottom: 100%; background: #eee; transform: rotate(45deg); transform-origin: top left; } .u-prop .proportional:before { content: ''; display: block; width: 100%; height: 100%; border-top: 1px solid #000; position: absolute; top: 0; left: 0; box-sizing: border-box; } .u-prop .wrap { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: 100%; overflow: hidden; } </style> </head> <body> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, esse assumenda corporis nemo perspiciatis dolorem vero consectetur asperiores necessitatibus, ea, saepe fugit alias, voluptatum blanditiis quia! Consequatur dolorem, consectetur adipisci. <div class="u-prop"> <div class="wrap"> <img class="spacer" width="2048" height="2048" src="https://www.java2s.com/style/demo/Safari.png"> <div class="proportional"></div> </div> </div> <div class="u-prop is--bot"> <div class="wrap"> <img class="spacer" width="2048" height="2048" src="https://www.java2s.com/style/demo/Firefox.png"> <div class="proportional"></div> </div> </div> </div> </body> </html>