1

I want to create a Parallelogram object by flat (true) background-image .

HTML:

<div class="q-item"></div>

CSS:

.q-item {
    width: 180px;
    height: 132px;
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 13px 1px;
    float: left;
    margin-left: 58px;
    padding-right: 1%;
    border: 2px solid #1D2A3D;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
}

please see my sample at jsfiddle

how to set transform for div without effect on object's on this element and whiteout effect at this background?

Rahil Wazir
  • 10,007
  • 11
  • 42
  • 64
  • Rahul this questins not help to me. –  Sep 29 '14 at 20:20
  • 1
    what about this http://stackoverflow.com/questions/18289643/how-do-i-unskew-background-image-in-skewed-layer-css – Rahul Dess Sep 29 '14 at 20:23
  • yes! it's like showdev answer and it working good. :) thanks and this question will be deleted –  Sep 29 '14 at 20:25

1 Answers1

1

I had success by adding a pseudo-element ::before, moving the background-image to that pseudo-element, and applying a reversed skew to counteract your original skew.

This is based on a solution at sitepoint.com.

.q-item {
    width: 180px;
    height: 132px;
    float: left;
    margin-left: 58px;
    padding-right: 1%;
    border: 2px solid #1D2A3D;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
}

.q-item::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 33px 1px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -ms-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}

WORKING EXAMPLE

showdev
  • 28,454
  • 37
  • 55
  • 73
  • The question has been flagged as a duplicate. The duplicate post has an answer similar to mine. I'll delete my answer in a few minutes. – showdev Sep 29 '14 at 20:14