web creating

POROA

【CSS】CSSのみでギザギザの円を表現する方法

何%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>

若干、容量も軽くなるし、色の変更など、スタイルを変更するだけなので、作業も簡素化します。
是非活用してください。
著者:poroa | 投稿日:2016年11月07日 | カテゴリ:CSS
  • ■同じカテゴリの記事
  • ■よく見られている記事
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング