Side by side skewed divs

Admin 1
Viewed 304

I would like to have 2 divs side by side. One with some text and a solid background and one with an image as a background. I have problems with the skewing part. The div is skewed but it looks weird, you can see the background of the website.

Take a look at this screenshot from gyazo:

Skewed Side-by-side Elements

If you could please help me to remove those little spaces between the picture text and website borders, that'd be great!

I have tried multiple different methods from background linear gradient 45 degrees to all other sorts of stuff..

.apartments-showCase-content {
  width: 50%;
  background: grey;
  height: 30em;
  float: left;
  box-sizing: border-box;
  left: 50%;
  transform: skew(6deg);
}

.apartments-showCase-image {
  width: 50%;
  background: #222;
  height: 30em;
  float: right;
  background: url(https://i.picsum.photos/id/1003/800/800.jpg);
  background-size: cover;
  transform: skew(6deg);
}
<section class="apartments-section">
  <div class="apartments-showCase-content"></div>
  <div class="apartments-showCase-image"></div>
</section>

css html
4 Answers

The width of the floated, skewed elements is the same as the original width. I added a container within the section, set overflow:hidden; on the section, and made the container larger than the section and centered. This means that the whole "triangle" created by the skew is hidden. You may have to play with the numbers, I just arbitrarily added 10% width on each side.

Also, your left:50% rule on the content wasn't doing anything because that element isn't relatively or absolutely positioned.

.apartments-showCase-content {
  width: 50%;
  background: grey;
  height: 30em;
  float: left;
  box-sizing: border-box;
  transform: skew(6deg);
}

.apartments-showCase-image {
  width: 50%;
  background: #222;
  height: 30em;
  float: right;
  background: url(https://i.picsum.photos/id/1003/800/800.jpg);
  background-size: cover;
  transform: skew(6deg);
}

.apartments-section {
  overflow: hidden;
}

.apartments-section-container {
 width: 120%;
 position: relative;
 left: -10%;
}
<section class="apartments-section">
  <div class="apartments-section-container">
    <div class="apartments-showCase-content"></div>
    <div class="apartments-showCase-image"></div>
  </div>
</section>

user_22977220

You can place your image background in img tag and can use transform: scale(1, 1.5); property in css to make it scale for perfect sizing. So, Change your css as :

.apartments-section{
  background:gray;
  transform: scale(1, 1.5);
  width:100%;
  overflow:hidden;
}

.apartments-showCase-content {
  width: 50%;
  background: grey;
  height: 30em;
  float: left;
  box-sizing: border-box;
  left: 50%;
  transform:skew(9deg)
}

.apartments-showCase-image {
  width: 50%;
  background: #222;
  height: 30em;
  float: right;
  background: #ff7f7f; //you can place bg color as your image background color
  background-size: cover;
}

.apartments-showCase-image img{
  transform:skew(9deg);
  width:100%;
  height:100%
}

and html as : 

<section class="apartments-section">
  <div class="apartments-showCase-content"></div>
  <div class="apartments-showCase-image">
    <img src="https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image" alt="img"/>
  </div>
</section>

This is not obvious answer but this will help you some how.. Thanx...

user_113720400

You can use css3 "calc" which will give you posability to calculate the percentage of the width with the degrees you've set (as rad): margin-side: calc(height * (10 * π/360));

.container{
  display:flex;
  border: 1px solid #000;
}
.container .one{
  position: relative;
  margin-left: calc(-350px * 0.0872665);
  flex: 1;
  height:350px;
  transform: skew(10deg);
  background: grey;
}
.container .two{
  position: relative;
  margin-right: calc(-350px * 0.0872665);
  flex: 1;
  height:350px;
  background-size: cover;
  transform: skew(10deg);
  background-color: #222;
  background-image: url(https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image);
}
    <section class="container">
      <div class="one"></div>
      <div class="two"></div>
    </section>

user_96346350

I suppose you want to keep the image unskewed so you can only apply a skew to the first div from one side.

Here is an idea with background where the trick is to create an overlap in the middle and in that area we draw a triangular shape with gradient

.apartments-showCase-content {
  width: calc(50% + 20px);
  background: 
    linear-gradient(to bottom left,transparent 49%,grey 50%) right/41px 100% no-repeat,
    grey content-box;
  padding-right:40px; /*2 x 20px*/
  margin-right:-40px; /*-2 x 20px*/
  box-sizing:border-box;
  z-index:1;
}

.apartments-showCase-image {
  width: calc(50% + 20px);
  background: #222;
  background: url(https://i.picsum.photos/id/1003/800/800.jpg) center/cover;
}
.apartments-section {
  height:300px;
  display:flex;
}

body {
 margin:0;
}
<section class="apartments-section">
  <div class="apartments-showCase-content"></div>
  <div class="apartments-showCase-image"></div>
</section>

Same idea with clip-path:

.apartments-showCase-content {
  width: calc(50% + 20px);
  background:grey;
  clip-path:polygon(0 0,calc(100% - 20px) 0, 100% 100%, 0 100%);
  
  margin-right:-40px; /*-2 x 20px*/
  box-sizing:border-box;
  z-index:1;
}

.apartments-showCase-image {
  width: calc(50% + 20px);
  background: #222;
  background: url(https://i.picsum.photos/id/1003/800/800.jpg) center/cover;
}
.apartments-section {
  height:300px;
  display:flex;
}

body {
 margin:0;
}
<section class="apartments-section">
  <div class="apartments-showCase-content"></div>
  <div class="apartments-showCase-image"></div>
</section>

user_86203330
Related