web-dev-qa-db-fra.com

Triangle CSS réactif avec des pourcentages de largeur

Le code ci-dessous créera une flèche à droite sous un élément <a>: 

JSFiddle

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}
<a href="#" class="btn">Hello!</a>

Le problème est que nous devons indiquer la largeur du lien pour obtenir une flèche de taille appropriée, car nous ne pouvons pas indiquer la largeur de la bordure en pixels.

Comment créer un triangle réactif?

csscss3responsive-designgeometrycss-shapes
29
sdvnksv

Vous pouvez utiliser un pseudo-élément incliné et pivoté pour créer un triangle responsive sous le lien:

DEMO (redimensionne la fenêtre de résultat pour voir comment elle réagit)

Le triangle conserve ses proportions avec la propriété padding-bottom.

Si vous souhaitez que la forme s'adapte à sa taille en fonction de son contenu, vous pouvez supprimer la largeur de la classe .btn.

.btn {
  position: relative;
  display: inline-block;
  height: 50px; width: 50%;
  text-align: center;
  color: white;
  background: gray;
  line-height: 50px;
  text-decoration: none;
  padding-bottom: 15%;
  background-clip: content-box;
  overflow: hidden;
}
.btn:after {
  content: "";
  position: absolute;
  top:50px;  left: 0;
  background-color: inherit;
  padding-bottom: 50%;
  width: 57.7%;
  z-index: -1;
  transform-Origin: 0 0;
  transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/

body {
  background: url('http://i.imgur.com/qi5FGET.jpg');
  background-size: cover;
}
<a href="#" class="btn">Hello!</a>

Pour plus d’informations sur les triangles réactifs et sur la façon de les créer, vous pouvez consulter Triangles avec transformation en rotation (triangles réactifs simples et sophistiqués)

45
web-tiki

Une autre solution consiste à utiliser un chemin de clip CSS pour extraire un triangle d’un bloc coloré. Pas de support IE cependant, mais pourrait être utilisé pour des outils internes, etc.

D&EACUTE;MO

Écrit avec SCSS pour plus de facilité.

.outer {
  background: orange;
  width: 25%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1em;

  p {
    margin: 0;
    text-align: center;
    color: #fff;
  }

  &:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; 
    right: 0;
    padding-bottom: 10%;
    background: orange;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  }

}
8
Probocop

J'ai trouvé une solution qui fonctionne avec n'importe quelle largeur/hauteur. Vous pouvez utiliser deux pseudo-éléments avec un arrière-plan linear-gradient, comme ceci ( fiddle ):

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:before {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 50%;
    height: 10px;
    background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}

.btn:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    height: 10px;
    background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
5
Alexandr Subbotin

Une version modifiée du code ci-dessous peut vous aider à atteindre cet objectif. 

HTML

<div class="triangle-down"></div>

CSS

.triangle-down {
    width: 10%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    margin-top:-500px;

    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-top: 500px solid #4679BD;
}

Pour en savoir plus sur les triangles réactifs: Responsive Triangles CSS

4
lessismore

J'ai essayé les autres réponses et je les ai trouvées trop complexes et/ou trop lourdes pour manipuler la forme du triangle. J'ai plutôt décidé de créer une forme de triangle simple en tant que svg.

La hauteur du triangle peut être définie sur une valeur absolue ou sur un pourcentage du rectangle afin de pouvoir répondre si nécessaire dans les deux sens.

html, body{
  height:100%;
  width:100%;
}
.outer{
  width:20%;
  height:25%;
  background:red;
  position:relative;
  
}
.inner{
  height:100%;
  width:100%;
  background-color:red;
}
.triangle-down{
  height:25%;
  width:100%;
  position:relative;
}
.triangle-down svg{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
}
svg .triangle-path{
  fill:red;
}
<div class="outer">
<div class="inner"></div>
  <div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
 <g>
  <path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
 </g>
</svg>
</div>

FF testé, Chrome, IE, Edge, Safari mob et mob Chrome

2
Will Jenkins

J'ai pris la réponse de @ Probocop et je viens avec ce qui suit:

<style>
    .btn {
        background-color: orange;
        color: white;
        margin-bottom: 50px;
        padding: 15px;
        position: relative;
        text-align: center;
        text-decoration: none;
    }

    .btn:after {
        background-color: inherit;
        clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        content: '';
        height: 50px;
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;
    }
</style>

<a href="#" class="btn">Hello!</a>

Cela fonctionne dans Chrome et j'ai ajouté un correctif pour Firefox. Cela ne fonctionne pas dans Edge. Toutefois, si vous diminuez la hauteur de la flèche vers le bas, votre apparence ne sera pas si mauvaise.

Veuillez noter que si vous utilisez bootstrap, vous devrez soit changer le nom, soit remplacer certains des styles qu’il applique. Si vous décidez de le renommer, vous devez également ajouter les éléments suivants au style .btn:

box-sizing: content-box;
0
nfplee