HTML CSS examples for CSS Widget:Shape
Create shape with a white border and transparent background and triangle on left and right
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w w w. j a va 2s .c o m--> background-color:Chartreuse; } .arrow-steps { width:129px; height:100px; border-top:2px solid yellow; border-left:2px solid blue; border-bottom:2px solid pink; margin-right:31px; margin-left:21px; margin-top:31px; position:relative; display:inline-block; } .arrow-steps:after { content:''; position:absolute; top:0px; left:-13px; width:0; height:0; border-top:51px solid OrangeRed; border-right:13px solid grey; border-bottom:51px solid BlueViolet; } .arrow-steps:before { content:''; position:absolute; top:0px; left:129px; width:0; height:0; border-top:51px solid Chartreuse; border-left:13px solid yellow; border-bottom:51px solid blue; } .arrow-steps a { display:block; margin-top:37px; color:pink; } </style> </head> <body> <div class="back"> <div class="arrow-steps"> <a>Lorem ipsum do</a> </div> </div> </body> </html>