Utilisez CSS pour créer de petits coins pointus et des effets de bulles dans la boîte de discussion

Je vois souvent des coins pointus comme celui-ci. Je ne les comprenais pas auparavant et je pensais qu'ils étaient tous réalisés avec des images. Plus tard, j'ai été surpris de constater que beaucoup d'entre eux étaient réalisés avec CSS, ce qui est à la fois beau et économe en ressources. . C'est vraiment le meilleur des deux mondes !

Alors, comment obtenir cet effet en utilisant CSS ? Tout d'abord, écrivons un code simple :

Le code est le suivant :

<p class="arrow"></p>
<style type="text/css">
.arrow {    
width:0;    
height:0;
    
font-size:0;
border:solid 10px #000;
}</style>

Ici, on peut obtenir un carré noir, qui est en fait composé d'une bordure, car la largeur et hauteur de p Tous valent 0,. Examinons donc de plus près à quoi ressemblent les bordures supérieure, inférieure, gauche et droite de p lorsque sa largeur et sa hauteur sont toutes deux égales à 0. Ensuite, nous définissons les couleurs de chaque côté de la bordure sur des couleurs différentes :

Le code est le suivant :

<p class="arrow"></p>
<style type="text/css">
.arrow {
    width:0;
    height:0;
    font-size:0;
    border:solid 10px;
    
border-color
:#f00 #0f0 #00f #000;
}
</style>

Nous avons constaté que lorsque la largeur et la hauteur de p sont toutes deux égales à 0, sa bordure entière est composée de quatre triangles, chaque côté étant un triangle, alors nous pouvons utiliser ces fonctionnalités, créer de jolis petits coins pointus. Il nous suffit de définir la couleur de la bordure à trois côtés inutile (triangle) pour qu'elle soit la même que celle de l'arrière-plan, afin que vous ne puissiez voir que le triangle souhaité, puis d'utiliser le positionnement pour ajuster la position. Le code spécifique est le suivant :

Le code est le suivant :

<p class="s
end
">
    <p class="arrow"></p>
</p>
<style type="text/css">
body {
    
background
:#4D4948;
}
.send {
    
position:relative;
    width:150px;
    height:35px;
    background:#F8C301;
    border-radius:5px; /* 圆角 */
    
margin:30px auto 0;
}
.send .arrow {
position:absolute;
    
top:5px;
right:-16px; /* 圆角的位置需要细心
调试
哦 */
    width:0;
    height:0;
    font-size:0;
    border:solid 8px;
    border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>

Vous avez terminé, l'effet est le suivant :

[Recommandations associées]

1. Tutoriel vidéo gratuit CSS3

2 Le navigateur implémente une animation CSS3 haute performance sur mobile .

3. Exemples de code de h5+css3 pour obtenir des effets de survol et de fondu d'image

4 Vous apprendre à utiliser CSS3 pour créer. 8 types d'animations de chargement

5.Vous apprendre à dessiner un motif circulaire standard en utilisant 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!