Last Updated
Viewed 18 Times
     

hi guys i have two differents div with background image, as you see in the picture. They are symetrics. i achieved that with clip-path, but as know it's not well supported by all browsers, could you guys give me an alternative to achieve that to be more compatible. Your help would be appreciated. Thx!

body {
  margin: 0;
  /* background: red; */
  padding: 100px 0;
}

.container_first {
  clip-path: polygon(0 0, 100% 14%, 100% 90%, 0% 100%);
  background-image: url(images/img12.jpg);
  min-height: 500px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.container_second {
  margin-top: -54px;

  clip-path: polygon(0% 10%, 100% 0, 100% 100%, 0 86%);
  background-image: url(images/img22.jpg);
  min-height: 500px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

Similar Question 1 : Clip-path background-image

customshape

Say i have the image above as a background of a div. can i clip everything in this div to the boundaries of the image?

I've searched and found as i think the most appropriate way with clip-path, but i have no idea how to define path of this image. I have thought to make it with canvas, but the problem is element inside this div.

If anyone has some experience with this kind of staff i would really appreciate your help

I want to add a repeating background image to a svg rect element that is using a clip-path. The svg file must have a viewbox attribute.

See the fiddle (http://jsfiddle.net/tbbtester/ES9cB/2/) - I want the triangle to have a background that looks similar to the rectangle - they are using the same image for background, why do they look so different?

HTML:

<p></p>
<div class="section-top">
    <div>
    <svg viewBox='0 0 100 50' preserveAspectRatio="none">
        <rect x="0" y="0" height="50" width="100" />

        <defs><clipPath id="section2a"><polygon points='0,0 100,5 100,50 '/></clipPath>
        <pattern patternUnits="userSpaceOnUse" id="pat1" x="0" y="0" width="1px" height="1px">
            <image width="1px" height="1px" xlink:href="http://svgtest.tbb.dev.novicell.dk/bg.png" />
        </pattern>
        </defs>
        </svg>
    </div>
</div>

CSS:

.section-top{position:absolute;width:100%;top:250px;}
.section-top    div{height:0;position: relative;padding-top:50%;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;}
rect{stroke:none;fill:url(#pat1);clip-path: url(#section2a);}
p{height:200px;background: url(http://svgtest.tbb.dev.novicell.dk/bg.png);}

I want to find a replacement for CSS's clip-path to assure cross-browser compatibility with internet explorer, edge and safari for the following issue.

The following example shows what I want to do, an iframe component wrapped in a style div with variable border size:

enter image description here

I was able to somewhat replicate this style with clip-path using rotated squares at the cutted out corners and removed the "excess" square with clip-path as you can see in the following image of my component:

enter image description here

The problem arises when I test this component in internet edge, since the latter does not have support to clip-path the squares are never clipped and it appears as so:

enter image description here

As you can verify my styled wrapper is not even similar to the original example, also it does not work in all browsers...

So I am asking for some guidance in what I can do to make this styled div wrapper be supported in all browsers and be somewhat more similar to the original example.

I have read this can be done with :before and :after div compositions but that does not allow me to completely wrap the iframe component. Also, I have read about svg masking which can not also be used due the reason of the former.

Any help is appreciated.

.preview {
  width: calc(100vw / 20);
  height: calc(100vh / 10);
  background: rgba(83, 80, 131, 0.5);
  cursor: pointer;
  clip-path: polygon( 10px 0%, 100% 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 100%, 0% 10px);
}

.border-corner {
  transition: all 0.2s ease-in;
  background: #e9f396;
  transform: rotate(45deg);
  bottom: -15;
  right: -15;
  width: 30px;
  height: 30px;
  position: absolute;
}
<div class="preview center">
  <img class="image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/09/12/11/naturo-monkey-selfie.jpg?w968" />
</div>
<div class="border-corner"></div>

Similar Question 4 (1 solutions) : SVG Clip-Path not working on a div

Similar Question 6 (1 solutions) : Issue with clip-path on an image in Internet Explorer

Similar Question 7 (1 solutions) : Making clip-path work with draggable image

Similar Question 8 (1 solutions) : Blurry image border effect with clip-path

Similar Question 9 (1 solutions) : How to clip animation outside of div using clip-path?

cc