css hace el triángulo de la barra de navegación

Cuando hacemos páginas web, solemos ver tal demanda (hacer un triángulo). En
Inserte la descripción de la imagen aquí
primer lugar

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

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

Inserte la descripción de la imagen aquí
Si lo necesitas, esconde los otros tres

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

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

Inserte la descripción de la imagen aquí
También existe este tipo de demanda
Inserte la descripción de la imagen aquí
Este tipo de flecha triangular es muy común en las páginas web.

  • Utilice & gt; & lt; para hacer y luego gire según la situación
  • Cargue directamente el icono (directamente a la biblioteca de iconos vectoriales lconfont-Alibaba para descargar)
        .b{
    
    
        
            font-weight: bold;
            position: absolute;
            transform: rotate(90deg);
        }

    </style>

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

Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/qq_41309350/article/details/114377004
Recomendado
Clasificación