web-dev-qa-db-fra.com

Comment arrondir les coins lors de l'utilisation du chemin de clip CSS

Je veux pouvoir arrondir les 3 coins les plus à gauche de cette forme que j'ai créée, une idée de comment cela peut être fait?

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
<div></div>
csspathclip
15
Eduardo Hernandez

J'ai récemment réussi à expérimenter des approches comme celle-ci ...

SVG

<svg width="0" height="0">
  <defs>
    <clipPath id="clipped">
      <circle cx="var(--myRad)" cy="var(--myRad)" r="var(--myRad)"></circle>
      <circle cx="var(--myRad)" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="calc(var(--myHeight) - var(--myRad))" r="var(--myRad)"></circle>
      <circle cx="calc(var(--myWidth) - var(--myRad))" cy="var(--myRad)" r="var(--myRad)"></circle>
      <rect y="var(--myRad)" width="var(--myWidth)" height="calc(var(--myHeight) - (2 * var(--myRad)))"></rect>
      <rect x="var(--myRad)" width="calc(var(--myWidth) - (2 * var(--myRad)))" height="var(--myHeight)"></rect>
    </clipPath>
  </defs>
</svg>

CSS

.clipped {
  --myWidth: 100vw;
  --myHeight: 10rem;
  --myRad: 2rem;
  clip-path: url(#clipped);
}

J'ai trouvé cela utile par rapport à l'utilisation de border-radius avec un débordement défini sur caché, car cette approche ne crée pas de BFC ou ne casse pas des choses comme la position collante et les effets de perspective css. De plus, cela vous permet "d'insérer" la position des chemins svg à découper à l'intérieur de l'élément avec un "rayon d'angle" si vous le souhaitez.

6
jonjohnjohnson

Vous pouvez également jouer avec le cercle pour obtenir différents effets.

-webkit-clip-path: circle(60.0% at 50% 10%);
clip-path: circle(50.0% at 50% 50%);

Codepen

Dommage que vous ne puissiez pas combiner le polygone et le cercle ... ou peut-être que vous pouvez et je n'ai pas assez joué avec pour le comprendre. HTH

6
J-Roel

Je n'ai pas d'option de commentaire oui, donc je l'écris comme réponse ..

vous devez écrire autant de points que possible pour contourner le coin. Rien d'autre ... pour, par exemple, quelques points de plus pour rendre le bit de la partie inférieure plus rond:

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%);

oh, oui, ou SVG comme commentaire ici .. :)

1
Eugene Kapustin

Vous pouvez utiliser un élément enfant et faire un clip-path Imbriqué sur celui-ci et le pseudo-élément de l'enfant. Le parent fera d'abord un clip polygon sur la forme, puis le pseudo aura un ellipse pour arrondir les bordures. Les clips auront un effet combiné.

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, #b0102d 210px);
  margin-top: 15vh;
}

.parent div {
  clip-path: polygon(100% 0%, 100% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}
<div class="parent">
  <div></div>
</div>

Voici la démo avec quelques adaptations pour illustrer ce qui se passe:

.parent, .parent div, .parent div:before {
  width: 423px;
  height: 90px;
  position: absolute;
}

.parent {
  right: 0;
  background-image: linear-gradient(to right, transparent 210px, yellow 210px);
  margin-top: 15vh;
}

.parent div {
  background-color: blue;
  clip-path: polygon(90% 0%, 90% 100%, 25% 100%, 0 50%, 25% 0);
}

.parent div:before {
  content: "";
  background-color: #b0102d;
  clip-path: ellipse(200px 45px at 210px);
}
<div class="parent">
  <div></div>
</div>

La taille horizontale et la position de l'ellipse peuvent être utilisées pour obtenir un effet différent sur les bords. Notez que la position de départ en arrière-plan du parent doit être ajustée à la même valeur que le placement de l'ellipse (dernière valeur dans clip-path) Car elle remplit tout ce qui est coupé du côté droit. Cela peut être visualisé en supprimant background-color: blue De .parent div Dans la deuxième démo.

Ici est un Codepen supplémentaire pour l'essayer.

1
Shikkediel