CSS3 Transformer l'Inclinaison d'Un Côté

est-il possible de créer "CSS3 Transform Skew One Side"

j'ai trouvé une solution, mais elle ne m'est pas utile, parce que j'ai besoin d'utiliser une image pour le fond (pas la couleur)

#skewOneSide {
    border-bottom: 40px solid #FF0000;
    border-left: 50px solid rgba(0, 0, 0, 0);
    height: 0;
    line-height: 40px;
    width: 100px;
}

Même JsFiddle n'est pas utile (biaisée de la zone doit être transparent)

23
demandé sur Hakam Fostok 2013-11-04 07:28:05

5 réponses

essaye ceci:

unskew l'image utilise un div imbriqué pour l'image et lui donne la valeur opposée. Donc, si vous aviez 20deg sur le parent, vous pouvez donner à la div imbriquée (image) une valeur asymétrique de-20deg.

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}
<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>

exemple:

http://jsfiddle.net/diegoh/mXLgF/1154/

20
répondu Diego 2017-04-06 13:15:05

je sais que c'est ancien, mais je voudrais suggérer l'utilisation d'un gradient linéaire pour obtenir le même effet au lieu d'un décalage de marge. Ceci maintiendra n'importe quel contenu à son endroit d'origine.

http://jsfiddle.net/zwXaf/2/

HTML

<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

CSS

/* reset */
ul, li, a {
    margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
    display: inline-block;
    text-align: center;
}
/* appearance styling */
ul {
    /* hacks to make one side slant only */
    overflow: hidden;
    background: linear-gradient(to right, red, white, white, red);
}
li {
    background-color: red;
     transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
}
li a {
    padding: 3px 6px 3px 6px;
    color: #ffffff;
    text-decoration: none;
    width: 80px;
     transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    -webkit-transform:skewX(20deg);
}
10
répondu Jake 2014-07-11 06:28:05

vous pouvez faire cela en utilisant transform et transform origins.

la combinaison de plusieurs transfroms donne un résultat similaire. J'espère que vous le trouverez utile. :) Voir ces exemples pour des transformations plus simples. cela a point à gauche :

div {    
    width: 300px;
    height:200px;
    background-image: url('http://placecage.com/g/300/200');
    -webkit-transform: perspective(300px) rotateX(-30deg);
    -o-transform: perspective(300px) rotateX(-30deg);
    -moz-transform: perspective(300px) rotateX(-30deg);
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    margin: 10px 90px;
}
<div></div>

Il dispose d'un droit d'inclinaison point :

div {    
    width: 300px;
    height:200px;
    background-image: url('http://placecage.com/g/300/200');
    -webkit-transform: perspective(300px) rotateX(-30deg);
    -o-transform: perspective(300px) rotateX(-30deg);
    -moz-transform: perspective(300px) rotateX(-30deg);
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    margin: 10px 90px;
}
<div></div>

transform: 0% 50%; n'est-il détermine l'origine pour le milieu vertical et horizontal à gauche de l'élément. donc la perspective n'est pas visible à la partie gauche de l'image, elle a l'air plate. Effet de Perspective est là à la partie droite, donc il semble incliné.

7
répondu Max Payne 2015-03-26 07:42:53

vous essayez avec le :before était assez proche, la seule chose que vous avez eu de changement a été fait à l'aide de l'inclinaison au lieu de les frontières: http://jsfiddle.net/Hfkk7/1101/

Edit: votre approche de Frontière fonctionnerait aussi, la seule chose que vous avez fait de mal était d'avoir l'élément avant sur votre div, donc la bordure transparente n'était pas visible. Si vous aviez placé le pseudo-élément à gauche de votre div, tout aurait fonctionné aussi: http://jsfiddle.net/Hfkk7/1102/

5
répondu darthmaim 2013-11-04 03:35:09

peut-être voulez-vous utiliser CSS "clip-path" (fonctionne avec la transparence et l'arrière-plan)

"clip-path" référence: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Générateur: http://bennettfeely.com/clippy/

Exemple:

/* With percent */
.element-percent {
  background: red;
  width: 150px;
  height: 48px;
  display: inline-block;
  
  clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}

/* With pixel */
.element-pixel {
  background: blue;
  width: 150px;
  height: 48px;
  display: inline-block;
  
  clip-path: polygon(0 0, 100% 0%, calc(100% - 32px) 100%, 0% 100%);
}
<div class="element-percent"></div>

<br />

<div class="element-pixel"></div>
0
répondu OzgurG 2018-10-02 23:06:03