css3を使用してWebページに五芒星スタイルを実装する（原理分析）

この記事の内容は、CSS3 を使用して Web ページに五芒星スタイルを実装することについてです。必要な方は参考にしていただければ幸いです。

私たちが普段Webページで目にする様々なグラフィックには、正方形、長方形、三角形、円などが含まれます。そのほとんどはCSS3や背景画像を使って実現されていますが、開発過程では背景が使用されるものがたくさんあります。たとえば、画像には追加のリクエストが必要であり、画像ピクセルに対する要件がより高いため、CSS3 がより主流の実装方法になりました。ここでは、擬似要素の使用法と、五芒星を描いて変換する方法を示します。

css3 を使用して五芒星スタイルを実装する原則

まず、大きなサイズのエッジを持つ要素を使用し、コンテンツ サイズをゼロにして三角形スタイルを実装します (詳細については、CSS3 を使用して Web ページにさまざまな三角形スタイル コレクションを実装する に注意してください)。その後、疑似要素:after と :before を使用して、三角形の 2 つの三角形をクローンします。同じサイズで、最後にこれら 2 つの疑似要素を使用します。 五芒星のスタイルを実現するために、要素に異なる回転変換が適用されます。

css3 疑似要素

CSS の主な目的は、HTML 要素にスタイルを追加することです。ドキュメント自体を乱すことなく余分な要素を追加できるようにする CSS の機能は、擬似要素と呼ばれます。当初、疑似要素の構文は「:」でしたが、CSS3の改訂後は、疑似要素と疑似クラス(:hover、:activeなど)を区別するために一律「::」が使用されるようになりました。この記事では、before と :after の 2 つの擬似要素について説明します。 before と :after はコンテンツの前に要素を追加し、 :after はコンテンツの後に要素を追加します (コンテンツの間にコンテンツを追加するには、 content 属性を使用します)。

css3 の新しいプロパティtransform

transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。この記事では、transform を使用して、複製された 2 つの三角形を異なる方向に回転します。

#css3 を使用して五芒星スタイルを実装する手順と実装コード

ステップ 1: 三角形を作成する

.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;
}

ステップ 3: を分割します。上記 2 つの疑似要素をそれぞれ異なる方向に 70 度回転変換を実行します#

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