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

CSSで三角形を設定する方法

藏色散人

リリース： 2023-01-03 09:26:02

オリジナル

6414 人が閲覧しました

CSS で三角形を設定する方法: 最初に HTML サンプルファイルを作成し、次に、span 要素をブロックレベル要素として設定し、境界線の 4 辺を異なる色に設定し、最後に上境界線を設定します。左右の境界線の幅は三角形として実現できます。

CSSで三角形を設定する方法

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

CSS を使用して三角形を設定する

1. 開発中、さまざまなプロジェクトを区別するために、要素を強調したりマークしたりするためにいくつかの小さな三角形が使用されることがあります。三角形をよりわかりやすい色で描くことで、効果が得られます。では、三角形の描き方はどうすればよいでしょうか。これまで知りませんでした。最近、三角形を使用している Web ページをいくつか見かけました。マークするとき、すべて背景画像を使用します。そのようにマークします。 Web ページに表示されると、少し硬く感じます。結局のところ、画像の読み込みは CSS の読み込みほどスムーズではありません。

コードを見てみましょう: ここでは、span 要素をブロックレベルの要素として設定し、枠線の四辺を別々に設定しており、それぞれ色が異なります:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100%;
            margin: 50px 0;
            text-align: center;
        }
        span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 50px;
            height: 50px;
            border-style: solid;
            border-width: 50px;
            border-top-color: red;
            border-left-color: blue;
            border-bottom-color: yellow;
            border-right-color: black;
        }
    </style>
</head>
<body>
    <div>如何设置三角形?</div>
    <div>
        <span>
        </span>
    </div>
</body>
</html>

ログイン後にコピー

実行結果: 四辺の枠線は実際にはこうなっていることがわかります台形構造の一種です台形の上と下を0にすると三角形になりますねそしてこれはhtmlやcssではできません静的ページを使わずに実装できます画像の不連続な表示は問題ありません;

次のステップは、台形の上部と下部を 0 に変更することです [推奨: " css ビデオチュートリアル ]]

上下が 0 になります。非常に簡単です。要素の高さと幅を 0

width:----->0 に設定するだけです。上下 2 種類の矢印

高さ:------>0 左右 2 種類の矢印を取得

1. 上矢印が必要な場合は、要素の左右の境界線と下境界線を削除します。

2. 下矢印が必要な場合は、左右の境界線を削除するだけです

#3. 左矢印が必要な場合は、上下と右の境界線を削除します

4. 右矢印が必要な場合は、必要なときに削除するだけです上下の境界線と左の境界線

アイデアは良いので試してみました。矢印を追加したい場合は、CSS を次のように設定します。

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px;

            /* 设置上边框和左右边框宽度为0 开始*/
            border-top-width: 0;
            border-left-width: 0;
            border-right-width: 0;
            /* 设置上边框和左右边框宽度为0 开始*/

            border-top-color: red;
            border-left-color: blue;
            border-bottom-color: yellow;
            border-right-color: black;
        }

ログイン後にコピー

実行結果: I機能しないことがわかりました、何ですか? なし

方法を変更しましょう: 幅の設定が機能しないので、色を設定しましょう。上、左、右の境界線を透明にするだけで十分ですか? CSS に、色を透明に設定する値がたまたまあります

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px;

            /* 设置上边框和左右边框宽度为0 开始*/
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            /* 设置上边框和左右边框宽度为0 开始*/

            /* border-top-color: red;
            border-left-color: blue; */
            border-bottom-color: yellow;
            /* border-right-color: black; */
        }

ログイン後にコピー

実行結果: OK、完了です。！！

下矢印を設定します:

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px;

            /* 设置上边框和左右边框宽度为0 开始*/
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            /* 设置上边框和左右边框宽度为0 开始*/

            border-top-color: red;
            /* border-left-color: blue;
            border-bottom-color: yellow;
            border-right-color: black; */
        }

ログイン後にコピー

左矢印を設定します:

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px;

            /* 设置上边框和左右边框宽度为0 开始*/
            border-top-color: transparent;
            border-bottom-color: transparent;
            /* border-left-color: transparent; */
            border-right-color: transparent;
            /* 设置上边框和左右边框宽度为0 开始*/

            /* border-top-color: red; */
            border-left-color: blue;
            /* border-bottom-color: yellow;
            border-right-color: black; */
        }

ログイン後にコピー

右矢印を設定します:

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px;

            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            /* border-right-color: transparent; */

            /* border-top-color: red;
            border-left-color: blue;
            border-bottom-color: yellow; */
            border-right-color: black;
        }

ログイン後にコピー

もちろん、CSS Together で書くこともできますが、これはより簡単に見えます:

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            /* 先后设置上右下左的border-color属性都是一样的，需要哪个箭头，再设置哪个方向的颜色属性，这样，最后设置的属性覆盖了前面的属性，就变成箭头了 */
            border: 50px solid transparent;
            border-top-color: red;
        }

ログイン後にコピー

上記は html と css の組み合わせを使用した矢印セットですが、もっとシンプルにすることはできますか?

以下では、class 属性を使用して矢印を設定しています。矢印が必要な場合は、class 属性を直接追加します。矢印が不要な場合は、クラスを削除するだけです。

やってみよう例を見てください:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100%;
            margin: 50px 0;
            text-align: center;
        }

        .jindaobox {
            position: relative;
            width: 980px;
            margin: 20px auto;

        }

        li {
            list-style: none;
            float: left;
            position: relative;
            border: 1px solid #eee;
            margin-right: 30px;
            padding: 10px 20px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }

        .active {
            border: 1px solid red !important;

        }

        .active::after {
            position: absolute;
            content: "";
            height: 0;
            width: 0;

            border: 8px solid transparent;
            border-top-color: red;

            top: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div>请选择你喜欢的电影</div>
    <ul>
        <li>飞龙在天</li>
        <li class="lis  active">紫川</li>
        <li>封神演义</li>
        <li class="lis  active">风云第一刀</li>
        <li>天外飞仙</li>
    </ul>

</body>

</html>

ログイン後にコピー

実行結果: