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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

藏色散人

Feb 28, 2021 am 11:01 AM

css

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>

ログイン後にコピー

実行結果:

このようにして、クラス属性を使用して矢印を制御する方法が実現されます。を選択する必要がある場合は、li 要素に active class 属性を追加するだけで、不要な場合は active class 属性を削除します。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7471

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップの日付を確認する方法 Apr 07, 2025 pm 03:06 PM

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。