HTML CSS examples for CSS Widget:Arrow
Triangular borders to create arrow
<html> <head> <style> div {<!-- ww w .j a v a2 s .co m--> background: #EF3E36; margin: 10px; } .arrow1 { position: relative; left: 50px; width: 250px; height: 100px; } .arrow1:before { display: block; content: ""; width: 0; height: 0; position: absolute; left: -50px; border: 50px solid #EF3E36; border-left: 50px solid transparent; border-right: 0; } .arrow1:after { display: block; content: ""; background: transparent; width: 0; height: 0; position: absolute; left: 250px; border: 50px solid transparent; border-left: 50px solid #EF3E36; } .arrow2 { position: relative; width: 300px; height: 100px; } .arrow2:after { display: block; content: ""; background: transparent; width: 0; height: 0; position: absolute; left: 300px; border: 50px solid transparent; border-left: 50px solid #EF3E36; } </style> </head> <body> <div class="arrow1"></div> <div class="arrow2"></div> </body> </html>