2
votes

css clip-path petit espace entre

Le code est ci-dessous. dégradé il y a un très petit écart entre deux divs.mais il ne devrait pas y avoir.

<div class='gra left'></div>
<div class='gra right'></div>

.gra {
  position: absolute;
  width: 200px;
  height: 200px;
}

.left {
  background: linear-gradient(0deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

.right {
  background: linear-gradient(270deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

html css clip-path

1 commentaires

Bienvenue à SO! Veuillez ajouter plus de détails sur le contexte de votre question pour la rendre plus facile à comprendre pour les autres. Pensez à ajouter des informations ou des captures d'écran de votre choix par rapport à la sortie réelle de votre application. Consultez également cet article du centre d'aide . À votre santé :)

5 Réponses :

1
votes

Vous pouvez modifier par:

<div class='gra left'></div>
<div class='gra right'></div>

.gra {
  position: absolute;
  width: 200px;
  height: 200px;
}

.left {
  background: linear-gradient(0deg, red 0%, blue 100%) ;
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

.right {
  background: linear-gradient(270deg, red 0%, blue 101%);
  clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
}

clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);

0 commentaires

2
votes

Cela se produit à cause de Antialiasing .

Utilisez left: 0; avec la classe de gauche et left: -1px; avec la classe de droite pour chevaucher l'anticrénelage

<div class='gra left'></div>
<div class='gra right'></div>

.gra {
  position: absolute;
  width: 200px;
  height: 200px;
}

.left {
  background: linear-gradient(0deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
  left:0;
}

.right {
  background: linear-gradient(270deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
  left: -1px;
}

0 commentaires

0
votes

Ou, d'une autre manière:

<div class="gra">
  <div class="left"></div>
  <div class="right"></div>
</div>

.gra {
  position: relative;
  width: 200px;
  height: 200px;
  overflow:hidden;
}

.left {
  background: linear-gradient(0deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
  position:absolute;
  bottom:0;
  left:0;
  width:201px;
  height:201px;
}

.right {
  background: linear-gradient(270deg, red 0%, blue 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
  position:absolute;
  top:0;
  right:0;
  width:201px;
  height:201px;
}

0 commentaires

0
votes

Voici une idée sans clip-path où vous aurez un meilleur support, moins de code et pas de problème d'écart

<div class="container">
</div>

.container {
  background: linear-gradient(to left, red 0%, blue 100%);
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, red 0%, blue 100%);
  transform-origin: bottom right;
  transform: skewX(45deg);
}

0 commentaires

0
votes

Vous pouvez résoudre ce problème en ajoutant un demi-pixel aux valeurs de 100%.

Changer:

clip-path: polygone (0% 0%, 0% 100%, 100% 100%);

À:

clip-path: polygone (0% 0%, 0% calc (100% + 0.5px), 100% calc (100% + 0.5px));

Si vous avez besoin de corriger un espace en haut, vous pouvez remplacer 0% par calc (0% - 0.5px) .

0 commentaires