web-dev-qa-db-fra.com

Boîte à flèches avec CSS

Comment puis-je faire cette boîte en CSS?

J'ai vu quelques tutoriels qui enseignent comment créer des boîtes avec des flèches, cependant, dans mon cas, aucun de ces tutoriels ne convient.

box

csscss3css-shapes
24
Nesta

J'ai créé votre élément avec la bordure 1px environnante. J'utilise un <div> et en profitant de :before et :after pseudo-éléments ( support du navigateur ). Le rectangle principal a une bordure régulière de 1px, mais les éléments triangulaires sont essentiellement 2 triangles, l'un plus sombre que l'autre.

Le triangle le plus clair se trouve au sommet du triangle le plus sombre, ce qui a pour effet de le cacher, et est légèrement décalé vers la gauche pour afficher le triangle le plus sombre en dessous. L'illusion qui en résulte est une bordure sombre de 1px sur le triangle lui-même.

Voici une question qui pose une question similaire:

Comment puis-je créer une "info-bulle" en utilisant du CSS pur?

L'une des réponses explique en fait comment on peut obtenir cet effet triangle:

https://stackoverflow.com/a/5623150/196921

En outre, c'est une excellente référence pour toutes les choses fantaisistes que vous pouvez faire avec les bordures ( grâce à PSCoder ):

... et voici un doux générateur de CSS ( 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>
33
Hristo

Ici est la solution que j'ai créée

Il existe 2 façons simples de procéder. Le premier moyen, moins efficace, est d'avoir 2 éléments. Je profite du :after pseudo-élément. J'ai utilisé position:absolute sur le :after pour 2 raisons.

  1. Vous pouvez placer l'élément là où vous en avez besoin
  2. Il empêche la fin du triangle d'être coupé

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 souhaitez prendre. Donc, si vous voulez faire un triangle rectangle, utilisez alors top et bottom. Ce qui donne à la flèche sa forme, c'est la dernière bordure. Cela va également dans la direction opposée. Donc, pour un triangle rectangle, vous utiliseriez border-left avec une couleur. Pour que cela soit à la bonne hauteur, vous devez faire la moitié de la hauteur de la boîte sur laquelle vous souhaitez le placer

6
Cody Guldner

SVG est la méthode recommandée pour créer de telles formes. Il offre simplicité et évolutivité.

Nous pouvons utiliser l'élément SVG ou polygon de path pour créer une forme comme ci-dessus et le tracer/le remplir avec de la couleur unie, un dégradé ou un motif.

Un seul attribut points est utilisé pour définir les formes dans l'élément polygon. 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 du 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:

  • L'attribut points définit la structure de la forme.
  • L'attribut stroke définit la couleur du contour/de la bordure.
  • stroke-width définit l'épaisseur du contour/de la bordure.
  • L'attribut fill définit la couleur de la forme intérieure à remplir.

Image de sortie:

Polygon Shape

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.

Polygon shape filled with gradient

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 une ombre sur cette forme en utilisant les filtres de SVG.

Polygon shape with gradient and shadow

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>
      <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>
4
Mohammad Usman