Question 410257 in Html Question posted in
Some basic documentation can be found here.

Html – Make two slant divs touch on the inside with shape-outside and clip-path and wrap text

I have the following HTML and CSS

.container {
  display: flex;
  width: 100%;
  height: 300px;
}

.left,
.right {
  width: 50%;
  height: 200px;
}

.left {
  background-color: #4CAF50;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.right {
  background-color: #2196F3;
  shape-outside: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
<div class="container">
  <div class="left"></div>
  <div class="right">Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl</div>
</div>

It look great but I can’t figure out how to make the inside edges touch instead of being separated by a middle white section. This is what it generates right now
enter image description here

Additionally, I want the text to wrap inside the dive and not break out. Thanks in advance for any help.

Tags:

2

Answers


  1. 0

    Since the div‘s are already clipped, all it takes is to nudge them to the side, for example with a negative margin, in your case -15%.

    This would make the combined width 85% of the container. To compensate I use an inner container wider by ~15%. This may effect the angel of the diagonals.

    .container {
  width: 100%;
  height: 100px;
  border: 1px solid red;
  overflow: hidden;
}

.slider {
  display: flex;
  width: calc(100% / 0.85);
}

.left,
.right {
  width: 50%;
  height: 100px;
}

.left {
  background-color: #4CAF50;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.right {
  background-color: #2196F3;
  shape-outside: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  margin-left: -15%;
}
    <div class="container">
  <div class="slider">
    <div class="left"></div>
    <div class="right">Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    If I understood you correctly, perhaps this example can help you:

    .container {
  --skew: 300px; /* <= adjust as you need */
  display: flex;
  width: 100%;
  height: 300px;
  position: relative;
}

.left,
.right {
  width: calc(50% + var(--skew) / 2);
  height: 200px;
  position: absolute;
}

.left {
  background-color: #4CAF50;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
  left: 0px;
}

.right {
  background-color: #2196F3;
  clip-path: polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%);
  right: 0;
}

.left:before {
  content: '';
  width: var(--skew);
  height: 100%;
  float: right;
  shape-outside: polygon(var(--skew) 0, 100% 0, 100% 100%, 0 100%);
}

.right:before {
  content: '';
  width: var(--skew);
  height: 100%;
  float: left;
  shape-outside: polygon(0 0, 100% 0, calc(100% - var(--skew)) 100%, 0 100%);
}
    <div class="container">
  <div class="left">
    Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah
    kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa
    hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl
  </div>
  <div class="right">Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah
    kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl Lorem Ipsum asj sjas hhjks hskj hsjkas hkjas hakjsh skjh skj hsakj sakja shkjas hkjsa
    hskj hskjs hkjshakjsh sksah kjlash akjshskjasha kjsl</div>
</div>

    In this example, I take into account that text can be in both blocks. By changing the CSS variable (--skew), you can adjust the skew you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search