CSSを使用して背景画像付きの六角形を作成するにはどうすればよいですか?

背景画像付き六角形

CSS を使用して HTML で六角形を作成するのは比較的簡単です。ただし、その六角形内に画像を追加するのは少し難しい場合があります。

この効果を実現するには、変換とオーバーフロー プロパティを使用して CSS3 の機能を活用できます。オーバーフローを非表示に設定してさまざまな回転値を使用すると、六角形内に画像を追加できるクロスブラウザ マスクを作成できます。

ここでは、マスクの作成方法を示す例を示します。背景画像付きの六角形:

.hexagon-bg {
    width: 100px;
    height: 86.61px;
    margin: auto;
    border-bottom: 20px solid red;
    position: relative;
    overflow: hidden;
}

.hexagon-bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(background-image.png);
    transform: rotate(30deg);
    position: absolute;
}

<div class="hexagon-bg">
</div>

この手法は、指定された背景画像を六角形の内側に表示できるようにするクロスブラウザー マスクを作成します。古いブラウザではこの機能がサポートされていない可能性がありますが、Chrome、Firefox、Safari などの最新のブラウザでは意図したとおりに効果が表示されることに注意することが重要です。

以上がCSSを使用して背景画像付きの六角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。