web-dev-qa-db-fra.com

Comment faire une boîte avec une flèche en CSS?

Comment faire une boîte avec une flèche en CSS?

Faire des coins ronds est facile. mais toute idée de faire la flèche sur le côté gauche sans utiliser l'image.

Est-il possible de rendre possible avec

un seul élément <p>....</p>

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}
<p></p>

enter image description here

csscss3css-shapes
27
Jitendra Vyas

Comme ça :

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

Démo:http://jsfiddle.net/sparkup/edjdxjf2/

METTRE À JOUR :

Cela peut également être réalisé sans éléments vides avec la propriété css :before

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    left:-30px;
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;
}

Demo: http://jsfiddle.net/sparkup/y89f1te0/

j'espère que ça aide

37
Sparkup

Chris Coyier a un excellent résumé des formes possibles construites en CSS avec un seul élément (et avant/après): http://css-tricks.com/examples/ShapesOfCSS/

13
David Kaneda

Info-bulle standard

Si vous voulez une simple flèche, vous pouvez ajouter un pseudo-élément avec border-right.

body {
    background:#ff004e;
    padding:40px;
}
p {
    background:white;
    border-radius: 10px;
    width:250px;
    height:150px;
    position: relative;
    display: inline-block;
}
p:before {
    content:"";
    position: absolute;
    height: 0px;
    width: 0px;
    top: 60px;
    left: -29px; /* 1px buffer for zooming problems while rendering*/
    border-width: 15px;
    border-color: transparent white transparent transparent;
    border-style: solid;
}
<p></p>

FIDDLE 1

enter image description here

Pointe de l'outil

Si vous voulez un flat Edge pour la flèche, essayez ceci:

body {
    background: #ff004e;
    padding:40px;
}
p {
    background:white;
    border-radius: 10px;
    width:250px;
    height:150px;
    position: relative;
    display: inline-block;
}
p:before {
    content:"";
    position: absolute;
    height: 45px;
    width: 16px; /* 1px buffer for zooming problems while rendering*/
    top: 50px;
    left: -15px; 
    background: white;
}
p:after {
    content:"";
    position: absolute;
    height: 40px;
    width: 15px;
    border-radius: 0 40px 40px 0;
    top: 75px;
    left: -15px;
    background: #ff004e;
    box-shadow: 0 -45px 0 0 #ff004e;
}
<p></p>

FIDDLE 2

enter image description here

11
The Pragmatick

Ma réponse (sans bord plat), A ajouté une formule de calcul:

.mainBox {
    border: solid 1px #e0e0e0;        
}

.mainBox:before {
    content:"";
    position: absolute;
    /*The right value must be calculated with: (top value of after) - (top value of before) = (right value of before) */
    /*example: (-4px) - (-7px) = 3px*/
    right: 72px; 
    /*The `top` value must be identical to border-width*/
    top: -7px; 
    width: 0;
    height: 0;
    border-style: solid;
    /*The `border-width` value must be identical to top*/
    border-width: 0 7px 7px 7px;
    /*The border color 3rd (#e0e0e0) value must be identical to its parent border color*/
    border-color: transparent transparent #e0e0e0 transparent;
    /*The (z-index of before) must at least one below the (z-index of after)*/
    /*Example: (z-index of before) < (z-index of after) or 9998 < 9999*/
    z-index:9998;
}

.mainBox:after {
    content:"";
    position: absolute;
    right: 75px;
    top: -4px; /*suppose to be identical to border-width*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #fff transparent; 
    z-index:9999;
}

Les règles de base sont les suivantes:

  1. La valeur avant droite doit être calculée avec: (after 's top) - (before' s top) = (before 's right)

exemple: (-4px) - (-7px) = 3px

  1. Les valeurs before et after 's top doivent être identiques à border-width.

  2. La valeur de couleur de bordure 3e (# e0e0e0 dans l'exemple) doit être identique à la couleur de bordure parent.

  3. La before 's z-index doit comporter au moins une valeur inférieure à la after' s z-index.

exemple: (before 's z-index) <(after' s z-index) ou 9998 <9999.

Le résultat:

 enter image description here

3
Shahar Shokrani

Utilisez cet outil en ligne et vous pouvez le faire sans avoir à saisir beaucoup de code

http://www.cssarrowplease.com

2
Thilanka De Silva
a.right{ border-style: dashed;
  border-color: transparent;
  border-width: 0.53em;
  display: -moz-inline-box;
  display: inline-block;
  font-size: 100px;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  width: 0; border-left-width: 1em;
  border-left-style: solid;
  border-left-color: #666;
  left: 0.25em; }

le code ci-dessus peut être utilisé pour la flèche droite.

0
Syed Nurul Islam