何％OFFなど、広告のポップを画像で背景に敷くのが一般的ですが
CSS3では、色々と画像の加工が可能です。
そこで、スタイルのみでギザギザを作成してみました。



【CSS】

#gizagiza a , #gizagiza a:after , #gizagiza a:before , #gizagiza a span {
  content:"";
  width:100px;
  height:100px;
  background-color:#000;
  position:absolute;
  top:0px;
}
#gizagiza , #gizagiza a , #gizagiza a:after , #gizagiza a:before {
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
}
#gizagiza a span {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  text-align: center;
  z-index: 999;
  line-height: 100px;
  color: #fff;
}
#gizagiza {
  position:relative;
  width:100px;
  height:100px;
  background-color:#000;
  margin:20px 0 0 20px ;
}

【HTML】

<div id="gizagiza">
<a><span>200円OFF</span></a>
</div>

若干、容量も軽くなるし、色の変更など、スタイルを変更するだけなので、作業も簡素化します。
是非活用してください。