Juan Juan - 1 year ago 94
CSS Question

How can i create a polygonal responsive div?

i've been trying to create a layout with a non-rectangular div, its a pentagon to be more precise,

I've tried using svg but the image doesn't appear when using firefox, also, one other requirement is for the div to scale well into smaller screens (responsive), but again, i tried using percentages as the points of the pentagon but that certainly didn't take me nowhere (also, on the text i used percents as the x and y but it also fails to rescale in smaller screens),

here is what I've got so far:


<div id="banner-shape">
<svg width="1440px" viewBox="0 0 1440 940" preserveAspectRatio="xMinYMax meet">
<pattern id='image' height='940' width='1440' patternUnits='userSpaceOnUse'>
<image xlink:href='http://lorempixel.com/output/nightlife-q-g-1440-940-2.jpg' height='940' width='1440' />
<polygon points='0,0 1440,0 1440,727 503,940 0,719' />
<text x="20%" y="5%0" font-size="90px" fill="blue" > New MODEL! </text>


polygon {
fill: url(#image);

Answer Source

At the end i created a div with the height and width that the polygon would have had it been a square, and used inline svg clipPaths with relative units for firefox and a clipPath defined on the css for webkit browsers, couldnĀ“t really make it work on iexplorer, here is my code


<svg width="0" height="0" >
        <clipPath id="clip-index" clipPathUnits="objectBoundingBox">
            <polygon points='0,0 1,0 1,0.773 0.349,1 0,0.76 0,0' />

<div class="section no-pad-bot valign-wrapper hide-on-med-and-down" id="index-banner"  style="clip-path: url('#clip-index');">
<div class="content of the polygonal div"></div>


#index-banner {
position: relative;
height: 65.29vw; /*to keep aspect ratio*/
width: 100vw; /*to adjust the banner to the browser window*/
background-image: url(public/index-banner.png);
background-color: #615966;
background-blend-mode: multiply;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 77.3%, 34.9% 100%, 0% 76%);


Since i needed to add content inside the div itself, and also put an overlay on the background, this proved to be the best course of action

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download