CSS Parallelogram on one side with image inside

Question

I'm trying to make this form using only CSS (the white form): enter image description here

But my css is making a Parallelogram and I want to make just one side and it deforms also my image, I just want to deform only the container and leave my image with its original form plus my css it not be.

Here's my html

<div class="header__logo">
    <img src="images/logo.jpg" alt="Skihouse">
</div>

And my css:

.header__logo {
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
  background: red;
  padding: 1em;
  background-color: #FFF; }

Here's the result on how it's beheaving:

enter image description here

Hope you guys guide me, thanks in advance for your time! Regards!

Use `::after` and `border-radius` – TylerH Jun 11 '15 at 18:08 — TylerH, Jun 11 '15 at 18:08
http://jsfiddle.net/yak613/0nbjxp58/ – yaakov Jun 11 '15 at 18:50 — yaakov, Jun 11 '15 at 18:50

Anirudh Modi · Answer 1 · 2015-06-11T18:12:45.677

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="image">
    </div>
  <div class="skew">
    </div>
  </div>
</body>
</html>

.container
{
  width:200px;
  height:50px;
  position:relative;
  overflow:hidden;
}

.image
{
  width:200px;
  height:50px;
  background:red;
  float:left;
}

.skew{
  position:absolute;
right:-20px;

  top:0px;
  width:30px;
  height:50px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
  background: red;
  padding: 1em;
  background-color: #FFF; }

try this. skew a container and put that above the image,what you did earlier was, you were skewing the image, but ideally you should put a skewed div on top of the that image, which give you your desired effect, and put both the image in a container.

you can also use rotate instead of skew, but for that you need to adjust the value of top and right accordingly.

score 1 · Accepted Answer · answered Jun 11 '15 at 18:58

1

Instead of skewing the logo at all, just save your image on the white background color and use an ::after (or ::before if you prefer) to draw the angle on the right side.

http://jsfiddle.net/bc2mcpst/

answered Jun 11 '15 at 18:58

Brian John

609
3
12

1

After trying each one of the solutions, this is the one that first perfectly and it was easier to understand, thank you so much! – Alex Jun 12 '15 at 05:22

score 0 · Answer 3 · answered Jun 11 '15 at 18:00

what about

<div class="header__logo">
  <div class="skewed"></div>
  <img class="header__logo__image" src="images/logo.jpg" alt="Skihouse">
</div>

and in your css

.header__logo {
  position: relative;
}
.skewed {
  -webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
       -o-transform: skew(20deg);
  background-color: #FFF;
  position: absolute;
  left: -40px; (or decrease until you only see white part)
  top: 0px;
  width: 80%;
  display: block;
}
.header__logo__image {
  position: absolute;
  left: 0px;
  top: 0px;
}

CSS Parallelogram on one side with image inside

3 Answers3