cssはナビゲーションバーの三角形を作成します

ウェブページを作るとき、私たちは通常そのような要求を目にします(三角形を作ります)。
ここに画像の説明を挿入
まず第一に

    .box{
    
    
    width: 0;
    height: 0;
    border: 50px solid ;
    border-color: #000 #FF0000 #FFFF00 #00FFFF;
}
    </style>

</head>
<body >
 
    <div class="box"></div>
    
</body>

ここに画像の説明を挿入
それが必要な場合は、他の3つを非表示にするだけです

    .box{
    width: 0;
    height: 0;
    border: 50px solid ;
    border-color: #000 transparent transparent transparent;
}
    </style>

</head>
<body >
 
    <div class="box"></div>

ここに画像の説明を挿入
この種の需要もあります。
ここに画像の説明を挿入
この種の三角形の矢印は、Webページで非常に一般的です。

  • &gt;&lt;を使用して、状況に応じて作成してから回転します
  • アイコンを直接アップロードします(ダウンロードするにはlconfont-Alibabaベクターアイコンライブラリに直接)
        .b{
    
    
        
            font-weight: bold;
            position: absolute;
            transform: rotate(90deg);
        }

    </style>

</head>
<body > 
    <div class="b">&gt;</div>
</body>

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/qq_41309350/article/details/114377004