Boîte de flèche avec CSS
3 réponses
J'ai créé votre élément avec la bordure 1px environnante. J'utilise un élément <div> et profite du :before et :after pseudo-éléments (navigateur-support ). Le rectangle principal a une bordure 1px régulière, mais les éléments triangulaires sont essentiellement des triangles 2, l'un plus sombre que l'autre.
Le triangle plus clair se trouve au-dessus du triangle plus sombre, ce qui a pour effet de le cacher, et est légèrement décalé vers la gauche pour montrer le triangle plus sombre en dessous. L'illusion qui en résulte est une bordure sombre 1px sur le triangle lui-même.
Voici une question qui pose une question similaire:
Comment puis-je créer une "tooltip tail" en utilisant CSS pur?
L'une des réponses a en fait une excellente explication de la façon dont on peut atteindre cet effet de triangle:
Aussi, c'est une excellente référence pour toutes les choses de fantaisie que vous pouvez faire avec bordures (grâce à PSCoder):
... et voici un générateur CSS doux (Merci à David Taiaroa):
Quoi Qu'il en soit, voici le code correspondant:
#arrow {
width: 128px;
height: 100px;
background-color: #ccc;
border: 1px solid #999;
position: relative;
}
#arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #ccc;
}
#arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}<div id="arrow"></div>Voici la solution que j'ai créée
Il y a 2 façons simples de le faire. La première, la moins efficace est d'avoir 2 éléments. Je profite du pseudo élément :after. J'ai utilisé position:absolute sur :after pour 2 raisons.
- vous pouvez placer l'élément où vous devez
- Il empêche la fin du triangle d'être coupée
La clé pour créer le triangle utilise la propriété border. Vous avez 2 bordures avec la couleur de transparent set. Ces 2 bordures sont opposées à la direction que vous voulez aller. Donc, si vous voulez faire un triangle rectangle, puis utilisez top et bottom. Ce qui donne à la flèche sa forme est la dernière bordure. Il va aussi dans la direction opposée. Donc, pour un triangle rectangle, vous utiliseriez border-left avec une couleur. Pour obtenir ce à la bonne hauteur, vous devez faire la moitié de la hauteur de la boîte que vous souhaitez placer sur
SVG est le moyen recommandé de créer de telles formes. Il offre la simplicité et l'échelle-capacité.
Nous pouvons utiliser l'élément polygon ou path de SVG pour créer une forme comme ci-dessus et la remplir avec une couleur unie, un dégradé ou un motif.
Un Seul attribut points est utilisé pour définir des formes de polygon élément. Cet attribut consiste en une liste de points. Chaque point doit avoir 2 nombres, une coordonnée x et une coordonnée Y. Une ligne droite est tracée automatiquement à partir dernier point au point de départ pour fermer la forme.
Voici le code nécessaire pour créer cette forme:
<polygon points="10,12 265,10 285,93 265,184 10,184"
stroke="#333"
stroke-width="2"
fill="#eee" />
Voici une brève description du code ci-dessus:
-
pointsattribut définit la structure de la forme. -
strokeattribut définit la couleur pour le contour / bordure. -
stroke-widthdéfinit l'épaisseur du contour / bordure. -
fillattribut définit la couleur de la forme intérieure à être remplir.
L'Image De Sortie:
Exemple De Travail:
body {
background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
background-position: center bottom;
background-size: cover;
margin: 0;
}
.box {
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}<div class="box">
<svg width="300" height="200" viewBox="0 0 300 200">
<polygon points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="#eee" />
</svg>
</div>Cette forme peut également être remplie de dégradé ou de motif.
Exemple De Travail:
body {
background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
background-position: center bottom;
background-size: cover;
margin: 0;
}
.box {
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}<div class="box">
<svg width="300" height="200" viewBox="0 0 300 200">
<defs>
<linearGradient id="grad">
<stop offset="0" stop-color="#11a798" />
<stop offset="1" stop-color="#23645d" />
</linearGradient>
</defs>
<polygon id="shape" points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="url(#grad)" />
</svg>
</div>Nous pouvons appliquer de l'ombre sur cette forme en utilisant les filtres de SVG.
De Travail Exemple:
body {
background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
background-position: center bottom;
background-size: cover;
margin: 0;
}
.box {
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}<div class="box">
<svg width="300" height="200" viewBox="0 0 300 200">
<defs>
<linearGradient id="grad">
<stop offset="0" stop-color="#11a798" />
<stop offset="1" stop-color="#23645d" />
</linearGradient>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<polygon id="shape" points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="url(#grad)" filter="url(#shadow)" />
</svg>
</div>