web-dev-qa-db-fra.com

CSS3 Transform Skew One Side

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

J'ai trouvé une solution, mais ce n'est pas utile pour moi, car je dois 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 ceci JsFiddle n'est pas utile non plus (la zone asymétrique doit être transparente)

csshtml5css3css-shapes
26
Syed

Essayez ceci:

Pour unskew l'image utilise un div imbriqué pour l'image et lui donne la valeur d'inclinaison opposée. Donc, si vous aviez 20deg sur le parent, vous pouvez donner à la division 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>

L'exemple:

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

24
Diego

Je sais que c'est vieux, 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 tout contenu à son emplacement 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);
}
13
Jake

vous pouvez le faire en utilisant transformer et transformer les origines.

La combinaison de plusieurs transactions donne un résultat similaire. J'espère que cela vous aidera. :) Voir ces exemples pour des transformations plus simples. cela a laissé le 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: 100% 50%;
    -moz-transform-Origin: 100% 50%;
    -o-transform-Origin: 100% 50%;
    transform-Origin: 100% 50%;
    margin: 10px 90px;
}
<div></div>

Cela a le bon point de biais:

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>

quoi transform: 0% 50%; ne fait que définir l'origine au milieu vertical et horizontal gauche de l'élément. la perspective n'est donc pas visible dans la partie gauche de l'image, elle a donc l'air plate. L'effet de perspective est présent à la partie droite, il semble donc incliné.

9
Max Payne

Vous essayez avec le :before était assez proche, la seule chose que vous deviez changer consistait en fait à utiliser skew au lieu des frontières: http://jsfiddle.net/Hfkk7/1101/

Edit: Votre approche de la frontière fonctionnerait aussi, la seule chose que vous avez mal faite est d’avoir l’élément précédent au-dessus de votre div, la bordure transparente ne s’affiche donc pas. Si vous aviez positionné le pseudo-élément à gauche de votre div, tout aurait également bien fonctionné: http://jsfiddle.net/Hfkk7/1102/

6
darthmaim

Peut-être que vous voulez 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%);
}

/* With background */
.element-background {
  background: url(https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center/cover;
  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>

<br />

<div class="element-background"></div>
2
OzgurG