HTML CSS examples for CSS Widget:Shape
Add a border to a triangle using pure CSS
<html> <head> <style type="text/css"> .arrow-tip {<!--from w w w .j a v a2s. c om--> position: relative; margin-top: 100px; } .arrow-tip:after, .arrow-tip:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow-tip:after { border-color: rgba(0, 0, 0, 0); border-bottom-color: #222; border-width: 15px; margin-left: -15px; } .arrow-tip:before { bottom: -1px; border-color: rgba(0, 0, 0, 0); border-bottom-color: red; border-width: 17px; margin-left: -17px } </style> </head> <body> <div class="arrow-tip"></div> </body> </html>