Explication détaillée d'exemples simples d'implémentation de triangle en CSS-tutoriel CSS-php.cn

Explication détaillée d'exemples simples d'implémentation de triangle en CSS

高洛峰

Libérer： 2017-03-07 14:49:28

original

1679 Les gens l'ont consulté

Dans de nombreuses productions de pages, un triangle sera conçu pour dépasser. Voici une méthode de conception compatible avec différents navigateurs :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .corner-top{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:solid dashed dashed dashed;     
            border-color:#e66161 transparent transparent transparent;   
        }   
        .corner-bottom{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed dashed solid dashed;     
            border-color:transparent transparent #94e24f transparent;   
        }   
        .corner-left{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed dashed dashed solid;     
            border-color:transparent transparent transparent #85bfda;   
        }   
        .corner-right{   
            width:0px;    
            height:0px;   
            font-size:0;               
            border-width:20px;     
            border-style:dashed solid dashed dashed;     
            border-color:transparent #f3bb5b transparent transparent;   
        }   
    </style>
</head>
<body>
    <p class="corner-top"></p>
    </br>
    <p class="corner-bottom"> </p>
    </br>
    <p class="corner-left"> </p>
    </br>
    <p class="corner-right"> </p>
</body>
</html>

Copier après la connexion

<.>Principaux points à noter :

1. font-size:0; est compatible avec IE, sinon IE apparaîtra trapézoïdal, ou line-height:0 fonctionnera également

2. Afin d'améliorer la ligne extensible, définissez la couleur de la bordure sur transparente, mais la transparence sera grise dans IE. La méthode de compatibilité consiste à définir le style de bordure correspondant sur

3. . Dans le projet, il est généralement sélectionné Utiliser le positionnement absolu pour positionner le triangle à la position correspondante, mais parfois il n'est pas nécessaire d'utiliser un triangle inversé, le résultat est qu'il y a plusieurs hauteurs dans le conteneur. la hauteur du conteneur, puis overflow: Hidden; (le principe de la conception du triangle est connu)

L'exemple simple ci-dessus d'implémentation d'un triangle en CSS pur est tout le contenu partagé par l'éditeur, je l'espère. Je peux vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.

Pour des exemples plus détaillés d'exemples simples d'utilisation de CSS pour implémenter des triangles, veuillez faire attention au site Web PHP chinois pour les articles connexes !