CODEWITHSUNDEEP
htmlcsssvgclip-path
Ziv Feldman
Ziv Feldman

Reputation: 401

CSS Clip-path is not working as expected with multi path shapes

I created a three path SVG file

my svg file

I want to use each part (left, middle, right) and clip each of the dive to get this from this enter image description here

CSS

.bgmove {
  position: relative;
  width: 1100px;
  height: 70px;
}

.left {
  clip-path: url(#clipLeft);
  background-color: red;
  width: 403px
}

.middle {
clip-path: url(#clipMiddle);
  background-color: black;
  width: 284px;
  left: 373px;
}

.right {
clip-path: url(#clipRight);
  background-color: green;
  width: 473px;
  left: 627px;
}

.left,
.middle,
.right {
  height: 70px;
  position: absolute;
}

HTML Code

<html>
  <head>
  </head>
  <body>
    <div class="bgmove">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>

    <svg height="70" width="1100">
      <defs>
        <clipPath id="clipLeft">
          <path d="M40.4575,70,0,0H362.543L403,70Z" />
        </clipPath>
        <clipPath id="clipMiddle">
          <path d="M1100,70,1059.55,0H627l40.4506,70Z" />
        </clipPath>
        <clipPath id="clipRight">
          <path d="M657,70,616.38,0H373l40.62,70Z" />
        </clipPath>
      </defs>
    </svg>
  </body>
</html>

you can see the result here https://jsfiddle.net/Zivo/y4srujqe/

as you can see I only the left part is clipped while the the middle and the right are hidden for some reason though I used exactly the same seetings

What am I doing wrong

Upvotes: 0

Views: 1567

Answers (1)

vqf
vqf

Reputation: 2628

The divs are not inside the svg. If the shapes are going to be used as a clip-path, their origin is at the div itself. That means that clipMiddle and clipRight are way to the right of where you want them to be. To illustrate that, you can see the paths if you change every clip to #clipLeft:

.left {
  clip-path: url(#clipLeft);
  background-color: red;
  width: 403px
}

.middle {
  clip-path: url(#clipLeft);
  background-color: black;
  width: 284px;
  left: 373px;
}

.right {
  clip-path: url(#clipLeft);
  background-color: green;
  width: 473px;
  left: 687px;
}

See the result at https://jsfiddle.net/vnkgd3r5/. The middle path is not well clipped because it is shorter than the other two.

Upvotes: 1

Related Questions