HTML CSS examples for CSS Widget:Shape
Create Border around a div with a triangle point facing down
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #base {<!--from w w w. j a v a 2 s. co m--> background: red; display: inline-block; height: 55px; margin-left: 20px; margin-top: 55px; position: relative; width: 100px; } #base:after { border-bottom: 35px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: 54px; width: 0; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } </style> </head> <body> <div id="base"></div> </body> </html>