Clever Geek Handbook

CSS Parallelogram on one side with image inside

I am trying to make this shape using only CSS (white shape): enter image description here

But my css makes a parallelogram and I only want to do one side and it deforms my image as well, I just want to deform only the container and leave my image with its original shape plus my css which it won't.

Here is 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 is the result on how it beheaving:

enter image description here

Hope you guys guide me well in advance of your time! Hello!

+3


source to share


3 answers


Rather than skewing the logo altogether, just keep your image on a white background and use ::after

(or ::before

if you like) to draw a corner on the right side.



http://jsfiddle.net/bc2mcpst/

+1


source 


<!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 it. skew the container and place this over the image, what you did before you distorted the image, but ideally you should place the skewed div on top of that image, which will give you the effect you want and place both images in the container.



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

+1


source


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


source






More articles:


All Articles