HTML CSS examples for CSS Widget:Arrow
Create right Arrow with different background in footer
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> footer {<!--from www .j a va2 s . c o m--> position: relative; width: 100%; height: 50px; background-color: blue; } footer:before { display: block; content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 50px; background-color: yellow; } footer:after { display: block; content: ''; position: absolute; top: 0; left: 50%; height: 0px; width: 0px; border: 25px solid transparent; border-left-color: pink; } .arrow { border: 10px solid transparent; border-left-color: black; } </style> </head> <body> <footer></footer> </body> </html>