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メールのログイン入り口はどこですか？

7433

CakePHP チュートリアル

1359

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

Win11 Activation Key Permanent

Related knowledge

ブートストラップリストでデフォルトスタイルを削除する方法は？ Apr 07, 2025 am 10:18 AM

ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。

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

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

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

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

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

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

ブートストラップにファイルをアップロードする方法 Apr 07, 2025 pm 01:09 PM

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。

ブートストラップのレイアウト方法 Apr 07, 2025 pm 02:24 PM

Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント（XS、SM、MD、LG、XL）に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。

ブートストラップフレームワークを構築する方法 Apr 07, 2025 pm 12:57 PM

ブートストラップフレームワークを作成するには、次の手順に従ってください。CDN経由でブートストラップをインストールするか、ローカルコピーをインストールします。 HTMLドキュメントを作成し、ブートストラップCSSを＆lt; head＆gt;にリンクしますセクション。 bootstrap javascriptファイルを＆lt; body＆gt;に追加するセクション。ブートストラップコンポーネントを使用して、ニーズに合わせてスタイルシートをカスタマイズします。