Idées
Triangle
L'idée clé pour implémenter le triangle est d'utiliser la borderpropriété CSS pour créer un bloc rectangulaire transparent et d'utiliser la partie transparente de la bordure pour former le triangle. Voici une idée générale pour créer un triangle :
-
Créez un élément HTML, généralement un
<div>élément, pour contenir le triangle. -
Définissez une largeur et une hauteur appropriées pour l'élément afin de déterminer la taille du triangle.
-
Utilisez
borderl'attribut pour définir une bordure transparente pour cet élément. La largeur et la couleur de la bordure peuvent être ajustées selon les besoins. -
Utilisez
borderles différentes propriétés de bordure de pour déterminer la forme du triangle. En règle générale, vous pouvez utiliserborder-widthpour contrôler la largeur de la bordure,border-stylepour contrôler le style de la bordure etborder-colorpour contrôler la couleur de la bordure. -
Utilisez la propriété Transparent Border pour former la forme triangulaire souhaitée en contrôlant la partie opaque de la bordure. Généralement, cela est accompli en définissant une bordure sur transparente et la couleur de l'autre bordure sur la couleur souhaitée.
-
Vous pouvez utiliser
positionla propriété pour positionner le triangle là où vous le souhaitez, ou utiliser d'autres propriétés de style pour ajuster son apparence, telles quemargin,transform,top,leftetc.
secteur
La méthode de création d'un secteur est similaire à la création d'un triangle et est également réalisée en utilisant borderles propriétés CSS. Voici une idée générale pour créer un secteur rouge :
-
Créez un élément HTML, généralement un
<div>élément, pour contenir la forme en éventail. -
Définissez une largeur et une hauteur appropriées pour l'élément afin de déterminer la taille du ventilateur.
-
Utilisez
borderl'attribut pour définir une bordure transparente pour cet élément. La largeur et la couleur de la bordure peuvent être ajustées selon les besoins. -
Utilisez
borderles différentes propriétés de bordure de pour déterminer la forme du secteur. En règle générale, vous pouvez utiliserborder-widthpour contrôler la largeur de la bordure,border-stylepour contrôler le style de la bordure etborder-colorpour contrôler la couleur de la bordure. -
Utilisez
border-radiusla propriété pour ajouter des coins arrondis à la bordure festonnée afin de lui donner une forme festonnée. -
Utilisez la propriété Transparent Border pour former la forme d’éventail souhaitée en contrôlant la partie opaque de la bordure.
bulle
La raison en est de créer un effet de bulle de discussion similaire à celui que l'on trouve couramment dans les applications de chat, où un triangle pointe vers l'avatar de l'utilisateur ou vers l'avatar de l'expéditeur du message. Laissez-moi vous expliquer pourquoi il est configuré comme ceci :
-
Style de conteneur
.bubble-container:position: relative;: Définit le conteneur en positionnement relatif afin que le triangle soit positionné de manière absolue à l'intérieur.max-width: 200px;: Limitez la largeur maximale de la boîte à bulles pour garantir que le contenu du texte n'est pas trop large pour s'adapter à la taille de l'écran.background-color: #0077cc;: définissez la couleur d'arrière-plan de la boîte à bulles sur bleu, ce qui la rendra similaire à la couleur des bulles couramment observées dans les applications de chat.color: #fff;: Définissez la couleur du texte sur blanc afin que le texte soit clairement visible sur le fond bleu.border-radius: 10px;: Ajoutez des bordures arrondies à la boîte à bulles pour lui donner un aspect plus convivial et moderne.padding: 10px;: ajoutez un remplissage pour augmenter l'espace entre le texte et les bordures afin d'améliorer la lisibilité.margin: 10px;: Ajoutez des marges pour créer un espace entre plusieurs bulles de discussion afin de les rendre plus nettes.
-
Style triangulaire
.triangle:position: absolute;: Réglez le triangle sur un positionnement absolu, vous donnant un contrôle précis sur sa position.borderPropriétés : Utilisezborderla propriété pour créer un triangle transparent, oùborder-bottomest utilisée pour dessiner la base du triangle avec la même couleur que la couleur d'arrière-plan de la boîte à bulles.top: -10px;: Positionnez le triangle en haut de la boîte à bulles et utilisez unetopvaleur négative pour déplacer le triangle vers le haut afin qu'il semble être connecté à la boîte à bulles.left: 50%;Ettransform: translateX(-50%);: Centrez le triangle horizontalement sur le dessus de la boîte à bulles, en vous assurant qu'il est aligné avec le milieu de la boîte à bulles.
accomplir
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左边透明 */
border-right: 50px solid transparent; /* 右边透明 */
border-bottom: 100px solid #f00; /* 底边为红色 */
}
.sector {
width: 0;
height: 0;
border: 100px solid transparent; /* 边框宽度和颜色可以调整 */
border-bottom-color: #f00; /* 底边的颜色，这里是红色 */
border-radius: 50%; /* 将边框变为圆形 */
transform: rotate(45deg); /* 旋转45度，可根据需要调整角度 */
}
.bubble-container {
position: relative;
max-width: 200px; /* 气泡框最大宽度 */
background-color: #0077cc; /* 气泡框背景颜色 */
color: #fff; /* 文字颜色 */
border-radius: 10px; /* 圆角边框 */
padding: 10px; /* 内边距 */
margin: 10px; /* 外边距，可根据需要调整 */
}
.triangle1 {
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent; /* 左边透明 */
border-bottom: 10px solid transparent; /* 右边透明 */
border-left: 10px solid #0077cc; /* 底边为气泡框背景色 */
right: -10px; /* 位于气泡框顶部 */
top: 50%; /* 居中 */
transform: translateY(-50%); /* 水平居中 */
}
</style>
</head>
<body>
<!-- 三角形 -->
<div class="triangle"></div>
<!-- 扇形 -->
<div class="sector"></div>
<!-- 气泡框 -->
<div class="bubble-container">
<p>这是一个气泡框带有三角形。</p>
<div class="triangle1"></div>
</div>
</body>
</html>
