Implémentation du style CSS d'un exemple de petit triangle sur le côté droit de la zone de sélection-tutoriel CSS-php.cn

Implémentation du style CSS d'un exemple de petit triangle sur le côté droit de la zone de sélection

小云云

Libérer： 2018-01-19 09:45:09

original

2485 Les gens l'ont consulté

Cet article vous présente, à travers un exemple de code, comment utiliser le style CSS pour écrire le petit triangle sur le côté droit de la zone de sélection. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra vous aider.

Le rendu est le suivant :

Allez directement dans le code !

<!DOCTYPE html>
<html lang="en">
<head>
<title>小三角</title>
<style>
.up-triangle{
width:0px;
height:0px;
border-bottom:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:100px auto; 
}
.down-triangle{
width:0px;
height:0px;
border-top:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent; 
margin:100px auto; 
}
.left-triangle{
width:0px;
height:0px;
border-right:30px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent; 
margin:100px auto; 
}
.right-triangle{
width:0px;
height:0px;
border-left:30px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent; 
margin:100px auto; 
}
</style>
</head>
<body>
<p class="up-triangle"></p>
<p class="down-triangle"></p>
<p class="left-triangle"></p>
<p class="right-triangle"></p>
</body>
</html>

Copier après la connexion

Recommandations associées :

Tutoriel de style CSS pour les opérations jQuery

Exemple de code de style CSS pour savoir comment afficher le contenu dans Angular4

Connaissance de base des mini-programmes Explication détaillée des balises multimédias de style CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!