CSSで三角形を実装する方法-CSSチュートリアル-php.cn

CSSで三角形を実装する方法

青灯夜游

リリース： 2021-10-11 17:23:26

オリジナル

25727 人が閲覧しました

実装方法: 1. 高さと幅がゼロで、透明な境界線を持つコンテナーを使用します。 2. 線形グラデーションの Linear-gradient を使用します。 3. 「overflow:hidden」で「transform:rotate」を使用します。 4.用途「▼」や「▲」などの文字が描画されます。

CSSで三角形を実装する方法

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

境界線を使用して三角形を描画する

境界線を使用して三角形を認識することは、ほとんどの人が習得する必要があり、さまざまな顔の聖典にもよく見られます。高さと幅がゼロで、透明な境界線が実装されたコンテナー。

簡単なコードは次のとおりです:

<div class=&#39;normal&#39;></div>

ログイン後にコピー

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

div {
  width: 0px;
  height: 0px;
  margin: auto;
}

.normal {
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

ログイン後にコピー

高さと幅がゼロのコンテナに、異なる色の境界線を設定します:

CSSで三角形を実装する方法

この例では、 3 辺の境界線の色が 透明 であれば、さまざまな角度の三角形を簡単に取得できます。

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

ログイン後にコピー

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

ログイン後にコピー

CSSで三角形を実装する方法

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

次に、線形グラデーション

linear-gradientを使用して三角形を実装します。

その原理も非常に単純で、

45° のグラデーションを実装します:

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

ログイン後にコピー

CSSで三角形を実装する方法

その色をグラデーションカラーから変更させます。 2 つの固定色に変更します:

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

ログイン後にコピー

CSSで三角形を実装する方法

次に、いずれかの色を透明にします:

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

ログイン後にコピー

CSSで三角形を実装する方法

三角形を描画するには、transform:rotate with overflow:hidden

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

transform:rotate と overflow:hidden を使用します。一目で理解でき、覚えればすぐに覚えられます簡単なアニメーション図は次のとおりです:

CSSで三角形を実装する方法

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

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

完全なコード:

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

ログイン後にコピー

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

ログイン後にコピー

文字を使用して三角形を描画する

最後は、少しユニークですが、文字を使用して三角形を表現します。

以下に、いくつかの三角形の文字の 10 進数 Unicode 表現コードをリストします。

◄ : &#9668; 
► : &#9658; 
▼ : &#9660; 
▲ : &#9650;
⊿ : &#8895;
△ : &#9651;

ログイン後にコピー

たとえば、

▼ を使用して三角形 ▼ を実装すると、コードは次のとおりです:

<div class="normal">&#9660; </div>

ログイン後にコピー

div {
    font-size: 100px;
    color: deeppink;
}

ログイン後にコピー

効果はまだ良好です:

1CSSで三角形を実装する方法

(学習ビデオ共有:

css ビデオチュートリアル)

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