Dev Faq
3
votes

Comment créer un triangle asymétrique dans le coin inférieur gauche d'une boîte?

Je dois créer une boîte avec une flèche dans le coin inférieur gauche. Mon problème est d'obtenir le triangle asymétrique.

Voici un exemple pour la bordure inférieure de la boîte avec un triangle dans le coin inférieur gauche:

Exemple p >

Voici ma tentative jusqu'à présent: 

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>
.box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
}

4 commentaires

Pouvez-vous séparer le html et le javascript afin que nous puissions exécuter le code

Changez le dupe en .comment: before {background-color: skyblue; bas: -20px; gauche: 40px; } pour pointer dans l'autre sens

Si vous le voulez à gauche, pourquoi définissez-vous droite: 30px et non gauche: 0 ? :)

@MihaiT Désolé, il s'agissait d'une erreur de copie ...

5 Réponses :

1
votes

Écrivez ci-dessous le code pour générer la flèche 

.box {
position: relative;
background: #00aabb;
border-radius: .4em;
}

.box:after {
content: '';
position: absolute;
bottom: 0;
left: 0%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-right: 0;
margin-left: -10px;
margin-bottom: -20px;
}

2 commentaires

Pour obtenir un triangle asymétrique comme demandé, je suggère de définir margin-left sur 5px et d'utiliser une transformation CSS telle que transform: skew (30deg) . Exemple en direct sur JSFiddle

Oui, vous pouvez également faire avec la transformation.

0
votes

Vous pouvez utiliser un SVG comme arrière-plan du pseudo-élément, par exemple 

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 30px;
  bottom: -30px;
  width: 22px;
  height: 30px;
  color: #000;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 22 30" 
                   xmlns="http://www.w3.org/2000/svg" 
                   xmlns:xlink="http://www.w3.org/1999/xlink" >
                   <path d="M0 0 L22 30 L15 0 z" fill="%23000" /></svg>');
}

Exemple de code

0 commentaires
2
votes

J'ai un peu modifié la largeur de la bordure et ajouté transform: skewX () . Vous pouvez jouer avec le bon montant pour le biais. De plus, le : after a changé en : before et j'ai joué avec la propriété left et j'ai supprimé le right .
j'espère que cela aidera: 

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>
.box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:before {
  content: " ";
  position: absolute;
  left: 8px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 0px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
  transform: skewX(20deg);
}

0 commentaires
0
votes

J'ai mis à jour le CSS avec transform: rotate et border , vérifiez-le 

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>
.box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 7px;
  bottom: -41px;
  border-top: 45px solid black;
  border-right: 15px solid transparent;
  border-left: 0px solid black;
  border-bottom: none;
  transform: rotate(20deg);
}

.box.arrow-bottom:before {
  content: " ";
  position: absolute;
  left: 7px;
  bottom: -41px;
  border-top: 45px solid black;
  border-right: 0px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
  transform: rotate(-20deg);
}

0 commentaires
1
votes

Voici une idée utilisant plusieurs arrière-plans et reposant sur conic-gradient () 1

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>
.box {
  width: 150px;
  height: 75px;
  background: 
    linear-gradient(to bottom left,transparent 49%,#fff 50%) bottom 0 left 0/30px 30px border-box,
    linear-gradient(250deg, transparent 10px,#000 11px) bottom 0 left 0/30px 30px border-box,     
    black padding-box;
  background-repeat:no-repeat;
  color: #fff;
  padding: 20px;
  border-bottom:30px solid transparent; /*the space for the gradient*/
  margin: 40px;
}

Voici le dégradé seul pour mieux voir son fonctionnement: 

<div class="box">
</div>
.box {
  width: 60px;
  height: 60px;
  background: 
    conic-gradient(red 314deg, black 315deg,black 340deg,red 342deg)
}

1: Pris en charge uniquement sur chrome en fait

Une autre idée avec linear-gradient mais sans transparence: p> 

<div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>
.box {
  width: 150px;
  height: 75px;
  background: 
    conic-gradient(transparent 314deg, black 315deg,black 340deg,transparent 342deg)
    bottom -30px left 0/60px 60px border-box,     
    black padding-box;
  background-repeat:no-repeat;
  color: #fff;
  padding: 20px;
  border-bottom:30px solid transparent; /*the space for the gradient*/
  margin: 40px;
}

2 commentaires

Ça a l'air parfait. Exactement ce dont j'ai besoin, mais malheureusement, il n'y a que Chrome pris en charge, ce qui n'est pas une option pour moi ...

@ user3142695 oui il faut encore attendre un peu mais ça s'en vient;) il sera bientôt supporté partout. J'ai également ajouté une autre idée avec un dégradé simple mais sans transparence

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor