Comment faire pour arrondir les angles lors de l'utilisation de CSS clip-path

Je veux être en mesure de compléter les 3 de gauche coins sur cette forme que j'ai créé, aucune idée de comment cela peut être fait?

CSS:

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%);
}

HTML:

<div></div>

bennettfeely.com/clippy
ouais c'est ce que j'ai utilisé pour faire la forme, mais je ne sais pas comment faire pour arrondir les angles. Des idées?
Il faudrait aller le SVG clip route je soupçonne. Je ne pense pas que polygon prend en charge les courbes. - sarasoueidan.com/blog/css-svg-clipping
hmmm je vois. Ok merci pour le lien
est correcte. CSS clip-path prend en charge uniquement les formes de base (comme le polygone, cercle). Il ne prend pas en charge une combinaison de formes ou de chemins d'accès et que vous auriez à utiliser SVG (en ligne ou externe) pour que les.
pour plus tard lecteurs, répondez à la question en titre: avis trombine le trombone, vous avez la bordure arrondie option dans inset(): clip-path: inset(0 0 0 0 round 10%);

InformationsquelleAutor Eduardo Hernandez | 2015-08-01

4

Vous pouvez également perdre 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

Trop mauvais, vous ne pouvez pas combiner le polygone et le cercle... ou peut-être vous pouvez et je n'ai pas joué avec ça suffit pour le comprendre. HTH

InformationsquelleAutor J-Roel
4

J'ai récemment trouvé le succès d'expérimenter des approches comme ça...

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é ce utile par rapport à l'utilisation border-radius avec dépassement de la valeur hidden, parce que cette approche n'est pas de créer une BFC ou de casser des choses gluantes position et css effets de perspective. Aussi, cela permet de "inset" la position de l'svg chemins de clip à l'intérieur de l'élément avec un "coin-radius" si vous le souhaitez.
- Pouvez-vous poster un stylo?
- pas totalement réduit, mais essayez-la dans un navigateur chromium, et ajouter le préfixe propriétés pour les autres, vous pouvez voir comment les valeurs sont dérivées de entre ce du violon et de l'original de mes réponses exemple. jsfiddle.net/y7heo6md/1
- Pour les gens qui ont raté le commentaire de @antoni ci-dessus, ma réponse ici est en fait la même chose que l'utilisation de l'insert() la méthode avec l'option rond. Comme clip-path: encart(0 tour 2rem), mais gardez à l'esprit le tour de l'option n'a pas toujours été pris en charge par les navigateurs, afin de renforcer progressivement ou tout simplement utiliser ce fichier SVG approche pour la compat.
InformationsquelleAutor jonjohnjohnson
1

Je n'ai pas de commentaire option oui, donc je vais écrire comme une réponse..

vous avez besoin d'écrire autant de points que possible pour le tour du coin. Nothig d'autre...
par exemple quelques points de plus pour faire partie basse peu 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 que les commentaires des gens ici.. 🙂

InformationsquelleAutor Eugene Kapustin

Vous pouvez utiliser un élément enfant et faire un imbriquée clip-path sur l'enfant et la pseudo-élément. Le parent va faire un polygon clip sur la forme d'abord, puis le pseudo aura un ellipse pour arrondir les frontières. Les clips ont un effet combiné.

CSS:

.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);
}

HTML:

<div class="parent">
  <div></div>
</div>

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

CSS:

.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);
}

HTML:

<div class="parent">
  <div></div>
</div>

La taille horizontale et la position de l'ellipse peut être utilisé pour obtenir un effet différent sur les bords. Notez que le background position de départ de la mère doit être réglé à la même valeur que le placement de l'ellipse (la dernière valeur dans la clip-path), car il se remplit quelle que soit la chose coupée sur le côté droit. Ceci peut être visualisé par la suppression background-color: blue de .parent div dans la deuxième démo.

Ici est un supplément de Codepen à l'essayer.

InformationsquelleAutor Shikkediel

-2

Faire un rectangulaire clip et placez un large rectangle avec des bords arrondis sur elle. Avoir une bonne chance!

InformationsquelleAutor Vitali Pom

Vous devez vous connecter pour publier un commentaire.