Maison > interface Web > tutoriel CSS > le corps du texte

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
2497 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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal