Comment créer une boîte avec des coins inclinés et arrondis sur un côté via CSS ?

Question

J'ai actuellement besoin de faire quelque chose comme ça.

Ma première pensée a été d'utiliser le tracé du clip, mais les coins arrondis sont difficiles à réaliser et il est difficile de maintenir 22,5 degrés lorsque le bouton change de largeur en raison de son contenu.

J'ai donc fini par créer chaque bouton sous la forme de deux divs, avec un div incliné de 22,5 degrés et chevauchant le div rectangulaire régulier. Ensuite, j'ai ajouté un rayon de bordure aux deux.

body {
  hauteur de ligne : 0 ;
  taille de police : 16 px ;
  couleur de fond : noir ;
}

.groupe-de-boutons-cta {
  affichage : flexible ;
  écart : 2rem ;
  aligner les éléments : centre ;
}

.bouton-angulaire-wrapper-gauche {
  affichage : flexible ;
  isolement : isoler ;
  position : relative ;
  hauteur : 40px ;
  largeur : ajustement du contenu ;
}

.bouton-angulaire-wrapper-gauche .bouton-angulaire-main {
  rayon de bordure : 7px 0 0 7px ;
  hauteur : 100 % ;
  affichage : grille en ligne ;
  éléments de lieu : centre ;
  remplissage en ligne : 8px 16px ;
  marge droite : 13 px ;
  transition : couleur d'arrière-plan 50 ms ;
}

.bouton-angulaire-wrapper-gauche .bouton-angulaire-inclinable {
  rayon de bordure : 0 7px 7px 0 ;
  hauteur : 100 % ;
  largeur : 24 px ;
  position : absolue ;
  à droite : 0 ;
  haut : 0 ;
  bas : 0 ;
  indice z : -1 ;
  transition : couleur d'arrière-plan 50 ms ;
}

.button-angular-wrapper-left .button-angular-slant.back-slash {
  transformation : skewX (22,5 degrés );
}

.button-angular-wrapper-left .button-angular-slant.forward-slash {
  transformation : skewX(-22,5deg) ;
}

.bouton-angulaire-wrapper-gauche.bouton-angulaire-couleur-solide-blanc .bouton-angulaire-main,
.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant {
  fond : blanc ;
  bordure : 3px blanc uni ;
  Couleur bleue;
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-main {
  bordure droite : aucune ;
}

.button-angular-wrapper-left.button-angular-color-solid-white .button-angular-slant {
  bordure gauche : aucune ;
}

.bouton-angulaire-wrapper-droite {
  affichage : flexible ;
  isolement : isoler ;
  position : relative ;
  hauteur : 40px ;
  largeur : ajustement du contenu ;
}

.bouton-angulaire-wrapper-droite .bouton-angulaire-main {
  rayon de bordure : 0 7px 7px 0 ;
  hauteur : 100 % ;
  affichage : grille en ligne ;
  éléments de lieu : centre ;
  remplissage en ligne : 8px 16px ;
  marge gauche : 13 px ;
}

.bouton-angulaire-wrapper-droite .bouton-angulaire-inclinable {
  rayon de bordure : 7px 0 0 7px ;
  hauteur : 100 % ;
  largeur : 24 px ;
  position : absolue ;
  gauche : 0 ;
  haut : 0 ;
  bas : 0 ;
  indice z : -1 ;
}

.button-angular-wrapper-right .button-angular-slant.back-slash {
  transformation : skewX (22,5 degrés );
}

.button-angular-wrapper-right .button-angular-slant.forward-slash {
  transformation : skewX(-22,5deg) ;
}

.bouton-angulaire-wrapper-droit.bouton-angulaire-couleur-contour-blanc .bouton-angulaire-main,
.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant {
  bordure : 3px blanc uni ;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main {
  bordure gauche : aucune ;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .icon-call {
  Couleur blanche;
}

.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-main .cta-text {
  Couleur blanche;
}.button-angular-wrapper-right.button-angular-color-outline-white .button-angular-slant {
  frontière droite : aucune ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="cta-button-group">
  <div class="bouton-angulaire-wrapper-bouton gauche-angulaire-couleur-solide-blanc" href="">
    <div class="bouton-angulaire-main">
      <span class="cta-text">
        En savoir plus aujourd'hui
      </envergure>
    </div>
    <div class="bouton-angulaire-oblique oblique inverse">
    </div>
  </div>
  <div class="bouton-angulaire-wrapper-bouton droit-angulaire-couleur-contour-blanc" href="">
    <div class="bouton-angulaire-main">
      <span class="cta-text tel-link-no">
        1800-1-5555
      </envergure>
    </div>
    <div class="bouton-angulaire-oblique oblique inverse">
    </div>
  </div>
</div>

CodePen：https://codepen.io/katylar/pen/yLRjKaO

边缘。

Answer 1

J'ai essayé cette approche avec des pseudo-éléments. Le côté gauche de la forme est un élément ::before, et pour obtenir l'effet de survol, j'ai rendu invisibles certains côtés du bouton et du pseudo-élément et j'ai modifié le rayon de bordure de coins spécifiques.

.button {
  color: white;
  background-color: black;
  text-align: center;
  text-transform: uppercase;
  padding: 5px 10px;
  margin: 11px;
  display: inline-block;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 2px solid black;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.button-left::before {
  content: " ";
  display: block;
  position: absolute;
  top: -2px;
  left: -12px;
  z-index: -10;
  background-color: black;
  width: 20px;
  height: 100%;
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  border-radius: 4px;
  border: 2px solid black;
}

.button-left:hover {
  background: rgba(0,0,0,0);
  box-sizing: border-box;
  border: 2px solid black;
  border-left: 2px solid rgba(0,0,0,0);
  color: black;
  border-top-left-radius: 0;
}

.button-left:hover::before {
  border-right: 2px solid rgba(0,0,0,0);
  background: rgba(0,0,0,0);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button-content {
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);  
  display: inline-block;
}

<div class="button button-left">
  <span class="button-content">Slanted Button</span>
</div>