CODEWITHSUNDEEP
htmlcss
Remi
Remi

Reputation: 5367

Bottom skewed line with background image and round corners

Is it possible to have a div with a background image which has a skewed bottom AND round corners?

Most examples use only a background color which doesn't have the duplicate image problem that a background image has.

CSS clipping path

The clipping path option works however, it has no support on IE 11.

Closest solution so far

The HTML:

<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>

The CSS:

.container {
  overflow: hidden;
  padding-bottom: 40px;
}

#parallelogram {
  width: 300px;
  height: 150px;
  margin: -41px 0 0 0;
  -webkit-transform: skewY(-11deg);
  -moz-transform: skewY(-11deg);
  -o-transform: skewY(-11deg);
  background: red;
  overflow: hidden;
  position: relative;
  border-radius: 40px;
}

.image {
  background: url(http://baconmockup.com/340/500);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skewY(11deg);
  -moz-transform: skewY(11deg);
  -o-transform: skewY(11deg);
}

https://jsfiddle.net/Spindle/81e30bmx/

But the problem with this is that the round corners aren't visible anymore as well...

Upvotes: 1

Views: 867

Answers (2)

frnt
frnt

Reputation: 8795

Adding border-radius to parent div could work, as it will work as border-radius for four corner and then individually using border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius you can change and align accordingly as below and thus it skews at bottom-left along-with border-radius at 4 sides,

.container {
  overflow: hidden;
  padding-bottom: 40px;
  border-top-right-radius:16px;
  border-bottom-right-radius:14px;
  border-top-left-radius:40px;
  margin-top:40px;
  display:inline-block;
  }

#parallelogram {
  width: 300px;
  height: 150px;
  margin: -41px 0 0 0;
  -webkit-transform: skewY(-11deg);
  -moz-transform: skewY(-11deg);
  -o-transform: skewY(-11deg);
  background: red;
  overflow: hidden;
  position: relative;
  border-radius: 40px;  
}

.image {
  background: url(http://baconmockup.com/340/500);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skewY(11deg);
  -moz-transform: skewY(11deg);
  -o-transform: skewY(11deg);
  
}
<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>

Upvotes: 1

Josh Batley
Josh Batley

Reputation: 190

It is possible and does seems to work on your example.

If you are talking about the top left and right corners getting chopped off, then what you need to do is add a margin to the top so:

#parallelogram { margin: -41px 0 0 0; }

Would become:

 #parallelogram { margin: 23px 0 0 0; }

This will adds the hole shape in.

Upvotes: 0

Related Questions