HTML CSS examples for CSS Widget:Arrow
Create directional two pointed arrow using css via :after and :before
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .arrow {<!--from w w w .j a v a 2s . c om--> background: red; height: 30px; width: 300px; margin: 100px auto 0; position: relative; -webkit-filter: drop-shadow(1px 1px 1px #000); } .arrow:before { width: 0; height: 0; border-top: 40px solid transparent; border-right: 30px solid red; border-bottom: 40px solid transparent; position: absolute; content: ''; left: -30px; top: 50%; -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); -ms-transform: translatey(-50%); transform: translatey(-50%); } .arrow:after { width: 0; height: 0; border-top: 40px solid transparent; border-left: 30px solid red; border-bottom: 40px solid transparent; position: absolute; content: ''; right: -30px; top: 50%; -webkit-transform: translatey(-50%); -moz-transform: translatey(-50%); -ms-transform: translatey(-50%); transform: translatey(-50%); } </style> </head> <body> <div class="arrow"></div> </body> </html>