Page Widget How to - Create Shield Shape

Question

We would like to know how to create Shield Shape.
Answer


<!--<!--from w  w  w .j a  v a2  s. c  om-->
http://stackoverflow.com/questions/20102903/cross-browser-unique-shaped-link
-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#shield {
  position: relative;
  width: 140px;
  height: 125px;
  background-color: green;
  border-radius: 0 0 140px 140px;
  display: inline-block;
}

#shield:before, #shield:after {
  position: absolute;
  margin-top: 50px;
  content: "";
  left: 70px;
  top: 0;
  width: 70px;
  height: 85px;
  background: navy;
  border-radius: 100px 100px 0 0;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#shield:after {
  background-color: red;
  left: 0;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
</style>
</head>
<body>
  <p>
    This is a demo for <a
      href="http://stackoverflow.com/questions/20102903/cross-browser-unique-shaped-link"
      target="_blank">a question on Stack Overflow</a>.
  </p>
  <a href="#"><div id="shield"></div></a>
</body>
</html>
The code above is rendered as follows: