CSS3 Transform Skew One Side

问题

Is it possible to create \"CSS3 Transform Skew One Side\"

I found one solution, but it\'s not useful to me, because I need to use a image for background (not color)

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

Even this JsFiddle is not useful as well (skewed area should be transparent)

回答1:

Try this:

To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -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>

The example:

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

回答2:

I know this is old, but I would like to suggest using a linear-gradient to achieve the same effect instead of margin offset. This is will maintain any content at its original place.

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

回答3:

you can make that using transform and transform origins.

Combining various transfroms gives similar result. I hope you find it helpful. :) See these examples for simpler transforms. this has left 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>

This has right skew 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>

what transform: 0% 50%; does is it sets the origin to vertical middle and horizontal left of the element. so the perspective is not visible at the left part of the image, so it looks flat. Perspective effect is there at the right part, so it looks slanted.

回答4:

You try with the :before was pretty close, the only thing you had to change was actually using skew instead of the borders: http://jsfiddle.net/Hfkk7/1101/

Edit: Your border approach would work too, the only thing you did wrong was having the before element on top of your div, so the transparent border wasnt showing. If you would have position the pseudo element to the left of your div, everything would have worked too: http://jsfiddle.net/Hfkk7/1102/

回答5:

Maybe you want to use CSS "clip-path" (Works with transparency and background)

"clip-path" reference: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Generator: http://bennettfeely.com/clippy/

Example:

/* 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>

来源：https://stackoverflow.com/questions/19761202/css3-transform-skew-one-side

标签

css

html5

css3

css-shapes