純粋な CSS3_html/css_WEB-ITnose を使用してシンプルな五芒星のグラフィックを作成する方法

SVG、Canvas、CSS3、または背景画像を使用して、五芒星のパターンとそのホバー効果を実現できます。

CSS3 によって導入された擬似要素と変換機能により、五芒星グラフィックの実装が非常に簡単になり、グラデーションと組み合わせてより美しい効果を実現できます。
したがって、五芒星を実装するために画像を使用する必要はなくなりました (画像は追加のリクエストを必要とし、大量のデータを持ちます。デスクトップ IE ブラウザの下位バージョンをサポートしたくない場合は除きます)。

最初に三角形を作成します。これは通常、大きなサイズのエッジとコンテンツ サイズがゼロの要素を使用して実現されます。 コード例:

.tri {    width: 0;    height: 0;    border-left: 15px solid transparent;    border-right: 15px solid transparent;    border-bottom: 30px solid red;}

2 番目のステップでは、疑似要素 :after と :before を使用して 2 を複製します。同じサイズの三角形の要素。

.tri:after,.tri:before {    width: 0;    height: 0;    border-left: 15px solid transparent;    border-right: 15px solid transparent;    border-bottom: 30px solid red;}

次に、上記 2 つの疑似要素にさまざまな回転変換を適用します。

.tri:before {    transform: rotate(70deg);}.tri:after {    transform: rotate(-70deg);}

このようにして、五芒星のグラフィック (アイコン) を実装します。同様の方法を使用して、より多くの幾何学的形状を実装できます。

オンラインの例を通じて自分で試すことができます: http://wow.techbrood.com/fiddle/10258

最初にエッジとグラデーション効果を備えた三角形を実装する方法を考えてから、この実装を参照することもできます: http://wow.techbrood.com/fiddle/16978

by iefreer