CSS3 Transform Skew One Side

Question

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

User · Answer

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    x000D   x000D     With percent    x000D   element-percent   x000D    background  red  x000D    width  150px  x000D    height  48px  x000D    display  inline-block  x000D     x000D    clip-path  polygon 0 0  100  0   75  100   0  100    x000D    x000D   x000D     With pixel    x000D   element-pixel   x000D    background  blue  x000D    width  150px  x000D    height  48px  x000D    display  inline-block  x000D     x000D    clip-path  polygon 0 0  100  0   calc 100  - 32px  100   0  100    x000D    x000D   x000D     With background    x000D   element-background   x000D    background  url https   images pexels com photos 170811 pexels-photo-170811 jpeg auto compress amp cs tinysrgb amp dpr 2 amp h 750 amp w 1260  no-repeat center cover  x000D    width  150px  x000D    height  48px  x000D    display  inline-block  x000D     x000D    clip-path  polygon 0 0  100  0   calc 100  - 32px  100   0  100    x000D    x000D   lt div class  element-percent  gt  lt  div gt  x000D   x000D   lt br   gt  x000D   x000D   lt div class  element-pixel  gt  lt  div gt  x000D   x000D   lt br   gt  x000D   x000D   lt div class  element-background  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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     x000D   x000D  div       x000D      width  300px  x000D      height 200px  x000D      background-image  url  data image gif base64 R0lGODdhLAHIANUAAKqqqgAAAO7u7uXl5bKysru7u93d3czMzMPDw9TU1BUVFdDQ0B0dHaurqywsLHJyclVVVTc3N5SUlBkZGcHBwRYWFmpqasjIyDAwMJubm39 fyoqKhcXF4qKikJCQnd3d0ZGRhoaGoWFhV1dXVlZWZ fn7m5uT8 Py4uLqWlpWFhYUlJSTMzM4 Pj25ubkxMTBgYGBwcHG9vbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAALAHIAAAG kCAcEgsGo IpHLJbDqf0Kh0Sq1ar9isdsvter gsHhMLpvP6LR6zW673 C4fE6v2  4vH7P7 v gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2 v8DBwsPExcbHyMnKy8zNzs Q0dLT1NXW19jZ2tvc3d7f4OHi4 Tl5ufo6err7O3u7 Dx8vP09fb3 Pn6  z9 v8AAwocSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU6pcybKlS3gBYsZUIESDggAKLBCxiVOn hQNG2JCKMIz55CiPlUKWLqAQQMAEjg0ENAggAYhUadWvRoFhIsFC14kzUrVKlSpZbmydPCgAAAPbQEU ABCCFy3c tGSXCAAIEEMIbclUv3bdy8LSFEOCAkBIEhBEI0fiwkspETajWcSCIhxhDHkCWDrix5pYQJFIYEoAwgQwAhq4e4NpIAhQSoKBIkkTEUNuvZsYXMXukgQAWfryEnT16ZOZEUDiQ4SJ0EhgnVRAi8dq6dpQEBFzDoDHAbOwDyRJwPKdAhQAfWRiBAYI0ee33YLglQeM1AxBAJDAjR338BHqECCSskocEE1w0xIFYBPghVgS1lECAEIwxBQm8Y WrYG1EsJGCBWkRkBV HQmwIAIoAqNiSBg48VYJZCzY441U1GhFVagfYZoQDLbhFxI0A5EhkjioFFQAHHeAV1ZINUFbAk1LBZ1cLlKXgQRFKyrQelVHKBaaVJn0nwAAIDIHAAGcKKcSabR6RQJpCFKAbEWYuJQARcA7gZp9uviTooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxirrrLTWauutuOaq66689urrr8AGK ywxBZr7LHIJqvsssw26 yz0EYr7bTUVmvttdhmq 223Hbr7bfghhtPEAA7    x000D      -webkit-transform  perspective 300px  rotateX -30deg   x000D      -o-transform  perspective 300px  rotateX -30deg   x000D      -moz-transform  perspective 300px  rotateX -30deg   x000D      -webkit-transform-origin  100  50   x000D      -moz-transform-origin  100  50   x000D      -o-transform-origin  100  50   x000D      transform-origin  100  50   x000D      margin  10px 90px  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    This has right skew point     x000D   x000D  div       x000D      width  300px  x000D      height 200px  x000D      background-image  url  data image gif base64 R0lGODdhLAHIANUAAKqqqgAAAO7u7uXl5bKysru7u93d3czMzMPDw9TU1BUVFdDQ0B0dHaurqywsLHJyclVVVTc3N5SUlBkZGcHBwRYWFmpqasjIyDAwMJubm39 fyoqKhcXF4qKikJCQnd3d0ZGRhoaGoWFhV1dXVlZWZ fn7m5uT8 Py4uLqWlpWFhYUlJSTMzM4 Pj25ubkxMTBgYGBwcHG9vbwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAALAHIAAAG kCAcEgsGo IpHLJbDqf0Kh0Sq1ar9isdsvter gsHhMLpvP6LR6zW673 C4fE6v2  4vH7P7 v gIGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2 v8DBwsPExcbHyMnKy8zNzs Q0dLT1NXW19jZ2tvc3d7f4OHi4 Tl5ufo6err7O3u7 Dx8vP09fb3 Pn6  z9 v8AAwocSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU6pcybKlS3gBYsZUIESDggAKLBCxiVOn hQNG2JCKMIz55CiPlUKWLqAQQMAEjg0ENAggAYhUadWvRoFhIsFC14kzUrVKlSpZbmydPCgAAAPbQEU ABCCFy3c tGSXCAAIEEMIbclUv3bdy8LSFEOCAkBIEhBEI0fiwkspETajWcSCIhxhDHkCWDrix5pYQJFIYEoAwgQwAhq4e4NpIAhQSoKBIkkTEUNuvZsYXMXukgQAWfryEnT16ZOZEUDiQ4SJ0EhgnVRAi8dq6dpQEBFzDoDHAbOwDyRJwPKdAhQAfWRiBAYI0ee33YLglQeM1AxBAJDAjR338BHqECCSskocEE1w0xIFYBPghVgS1lECAEIwxBQm8Y WrYG1EsJGCBWkRkBV HQmwIAIoAqNiSBg48VYJZCzY441U1GhFVagfYZoQDLbhFxI0A5EhkjioFFQAHHeAV1ZINUFbAk1LBZ1cLlKXgQRFKyrQelVHKBaaVJn0nwAAIDIHAAGcKKcSabR6RQJpCFKAbEWYuJQARcA7gZp9uviTooIQWauihiCaq6KKMNuroo5BGKumklFZq6aWYZqrpppx26umnoIYq6qiklmrqqaimquqqrLbq6quwxirrrLTWauutuOaq66689urrr8AGK ywxBZr7LHIJqvsssw26 yz0EYr7bTUVmvttdhmq 223Hbr7bfghhtPEAA7    x000D      -webkit-transform  perspective 300px  rotateX -30deg   x000D      -o-transform  perspective 300px  rotateX -30deg   x000D      -moz-transform  perspective 300px  rotateX -30deg   x000D      -webkit-transform-origin  0  50   x000D      -moz-transform-origin  0  50   x000D      -o-transform-origin  0  50   x000D      transform-origin  0  50   x000D      margin  10px 90px  x000D    x000D   lt div gt  lt  div gt  x000D   x000D   x000D    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

User · Answer

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    x000D   x000D   container   x000D    overflow  hidden  x000D    x000D   x000D   parallelogram   x000D    width  150px  x000D    height  100px  x000D    margin  0 0 0 -20px  x000D    -webkit-transform  skew 20deg   x000D    -moz-transform  skew 20deg   x000D    -o-transform  skew 20deg   x000D    background  red  x000D    overflow  hidden  x000D    position  relative  x000D    x000D   x000D   image   x000D    background  url http   placekitten com 301 301   x000D    position  absolute  x000D    top  -30px  x000D    left  -30px  x000D    right  -30px  x000D    bottom  -30px  x000D    -webkit-transform  skew -20deg   x000D    -moz-transform  skew -20deg   x000D    -o-transform  skew -20deg   x000D    x000D   lt div class  container  gt  x000D     lt div id  parallelogram  gt  x000D       lt div class  image  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    The example   http   jsfiddle net diegoh mXLgF 1154

User · Answer

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   lt ul gt       lt li gt  lt a href     gt One lt  a gt  lt  li gt       lt li gt  lt a href     gt Two lt  a gt  lt  li gt       lt li gt  lt a href     gt Three lt  a gt  lt  li gt   lt  ul gt    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

User · Answer

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

[html] CSS3 Transform Skew One Side

Examples related to html

Examples related to css

Examples related to css-shapes