CODEWITHSUNDEEP
htmlcsscss-shapesclip-path
Kris
Kris

Reputation: 25

Using clip-path as part of header

So I'm having issues getting this particular clip path to display correctly in Firefox, and I'm not particularly sure how to get it to work correctly. So far, it displays correctly in WebKit browsers.

#banner {
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%);
  overflow: hidden;
}
#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}
#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}
#logo {
  position: fixed;
  border-collapse: collapse;
}
<div id="banner">
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank">
        <img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" />
      </a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

I'm sure it's something really simple, but I can't for the life of me figure out what I'm missing here to get this to display correctly in Firefox.

Upvotes: 2

Views: 931

Answers (1)

Harry
Harry

Reputation: 89780

Why does my clip-path not work in Firefox?

There is nothing wrong with your clip-path or the usage model. It doesn't work in Firefox because CSS clip-path is not yet supported by it. Firefox supports only the url() syntax which works using a SVG clip-path.

How to make it work in Firefox?

If you want the clip-path to work in Firefox then you'd have to convert your CSS clip-path into the SVG version like in the below snippet and use the url() syntax. Conversion of CSS clip-path into its SVG equivalent is very easy as you can see in the snippet. You'd just have to use the correct tags and also convert all the percentages into ratios.

(I have changed the color from white to yellowgreen for visibility purpose.)

#banner {
  background-color: yellowgreen;
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  -webkit-clip-path: url(#banner-clip);
  clip-path: url(#banner-clip);
  overflow: hidden;
}

#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}

#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}

#logo {
  position: fixed;
  border-collapse: collapse;
}
<!-- The SVG is for the clip-path -->
<svg width="0" height="0">
  <defs>
    <clipPath id="banner-clip" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 1 0, 1 1, 0 .65" />
    </clipPath>
  </defs>
</svg>

<div id="banner">
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank"><img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" /></a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

Does the above demo work in IE? If not, how to make it work?

The above demo would still not work in IE as it has absolutely no support for clip-path. If you need IE support also then you should do away with clip-path and use SVG directly. Below snippet has a demo for this.

What is being done here is that we create a path (trapezoidal) using SVG's path element, give it the required fill (background color) and then position it absolutely inside the .header. The shape short of works like an image (but is not an image).

#banner {
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  overflow: hidden;
}
#banner svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
#banner svg polygon{
  fill: yellowgreen;
}
#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}
#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}
#logo {
  position: fixed;
  border-collapse: collapse;
}
<div id="banner">
  <svg viewBox='0 0 1 1' preserveAspectRatio='none'>
    <polygon points="0 0, 1 0, 1 1, 0 .65" />
  </svg>
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank">
        <img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" />
      </a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

Useful Links:

Upvotes: 2

Related Questions