CSS3は三角形を実装できますか?-フロントエンドQ&A-php.cn

CSS3は三角形を実装できますか?

青灯夜游

リリース： 2022-03-07 16:40:38

オリジナル

1874 人が閲覧しました

css3 は三角形を実現でき、それを実現するには多くの方法があります: 1. 高さと幅がゼロのコンテナーと透明な境界線を使用して三角形を描画します; 2. 線形グラデーションの line-gradient を使用して三角形を描画します。 3. conic-gradient を使用して三角形を描画します; 4. クリップパスを使用して三角形を描画します。

CSS3は三角形を実装できますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css3 で三角形を実装する方法はたくさんあります。 見てみましょう:

1. 境界線を使用して三角形を描画します

境界線を使用して三角形を認識することは、ほとんどの人が習得できるはずです。古典的な作品でよく見られるのは、高さと幅がゼロで、透明な境界線を持つコンテナーの使用です。

<div class=&#39;top&#39;></div>
<div class=&#39;bottom&#39;></div>
<div class=&#39;left&#39;></div>
<div class=&#39;right&#39;></div>

ログイン後にコピー

html, body {
  width: 100%;
  height: 100%;
  display: flex;
}

div {
  width: 0px;
  height: 0px;
  margin: auto;
}
.top {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

.left {
  border: 50px solid transparent;
  border-right: 50px solid deeppink;
}

.bottom {
  border: 50px solid transparent;
  border-top: 50px solid deeppink;
}

.right {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

ログイン後にコピー

CSS3は三角形を実装できますか?

2. 線形グラデーションを使用して三角形を描画します

<div></div>

ログイン後にコピー

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

ログイン後にコピー

3、conic-gradient を使用して三角形

またはグラデーションを描画します。上記では線形グラデーションを使用して三角形を実装しました。興味深いことに、グラデーションファミリでは、角度グラデーション conic-gradient

も使用できます。三角形を実装するために使用されます。

その方法は、角度勾配の中心点を設定することができ、放射状勾配と同様の円の中心点も設定することができます。

角度勾配の中心点を 50% 0 (コンテナの上部の中央である center top

) に設定し、次の操作を実行します。角度勾配、勾配特定の角度範囲内では、それらはすべて三角形の形状になります。

高さと幅 200px x 100px のコンテナーがあり、その角度グラデーションの中心点を 50% 0

に設定するとします。

CSS3は三角形を実装できますか?

そして、90°

から始まる角度勾配図を描画するように設定します。概略図は次のとおりです。ご覧のとおり、最初の角度グラデーショングラフィックが 2 番目の辺に到達すると、すべて三角形になります。適切な角度を選択すると、簡単に三角形を取得できます。

#4. 三角形を描画するには、transform: 回転: オーバーフロー: 非表示を使用します。 CSS3は三角形を実装できますか?

この方法は比較的従来のもので、

transform: 回転

を CSS3は三角形を実装できますか? オーバーフロー: 非表示で使用します## ＃。一目で理解でき、覚えればすぐに覚えられます簡単なアニメーション図は次のとおりです:

グラフィックの回転中心を下に設定します左隅

左下 を回転させます。 overflow: hidden を使用します。

完全なコード:

<div class="normal"></div>
<div class="acute"></div>

.normal {
    background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}

.acute {
    background: conic-gradient(from 90deg at 50% 0, transparent 0, transparent 45deg, deeppink 45.1deg, deeppink 135deg, transparent 1deg);
}

ログイン後にコピー

<div class="demo"></div>
<div class="demo-opacity"></div>
<div class="triangle"></div>

ログイン後にコピー

5. クリップパスを使用して三角形を描画します

##clip-path 非常に興味深い CSSプロパティ。

clip-path

CSS プロパティは、要素の一部のみが表示されるクリッピング領域を作成します。領域内の部分が表示され、領域外の部分は非表示になります。クリッピング領域は、埋め込み URL への参照または外部 SVG へのパスによって定義されるパスです。

つまり、clip-path

を使用すると、コンテナを任意の場所にクリップできます。

多角形は 3 つの座標点によって実現され、余分なスペースは切り取られます。コードも非常に単純です:

html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    width: 141px;
    height: 100px;
    margin: auto;
}

.demo-opacity {
    overflow: hidden;
}

.demo,
.demo-opacity {
    position: relative;
    border: 1px solid #000;
    background: unset;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: conicmove 3s infinite linear;
        background: deeppink;
        transform-origin: left bottom;
        z-index: -1;
    }
}

.triangle {
    position: relative;
    background: unset;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
        z-index: -1;
    }
}

@keyframes conicmove {
    100% {
        transform: rotate(45deg);
    }
}

ログイン後にコピー

(学習ビデオ)共有 :

css ビデオチュートリアル

)

以上がCSS3は三角形を実装できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。