CODEWITHSUNDEEP
javascriptjqueryhtmlcss
finners
finners

Reputation: 885

Create a polygon shape using CSS or SVG that works in IE

I'm trying to layout similar to this -

Tractor image

And I've managed to do it quite easily using css clip-path:polygon - JS fiddle here - https://jsfiddle.net/79c6fsg4/1/. However this NEEDS to work in IE and Firefox and clip-path doesn't work in them and there aren't any decent polyfills out there that work in IE. I know I could also achieve this using SVG but because content inside the polygon div could make it taller or shorter, and the colour gradient can change depending on what the user selects means it's probably not the correct solution.

I've even experimented with pseudo element triangles on a div, placed at the absolutely on the far edge but that doesn't even work.

Does anyone else have any other ideas that I'm overlooking?

FIDDLE - https://jsfiddle.net/79c6fsg4/1/

<div class="holder">
    <div class="shape">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
</div>

.holder {
background-image: url(https://unsplash.it/1002/1000/?random);
background-cover: cover;
width: 500px;
height: 300px;
background-position: 50%;
margin-left: 30px;
position: relative;
}

.shape {
position: absolute;
left: -20px;
bottom: -20px;
width: 200px;
padding: 20px 40px 20px 20px;
clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #1e5799 46%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#1e5799 46%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#1e5799 46%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6
*/}

Upvotes: 2

Views: 424

Answers (2)

sol
sol

Reputation: 22949

You could apply a skew transformation to a pseudoelement on .shape

This appears to work in Firefox and IE11

fiddle

.holder {
  background-image: url(https://unsplash.it/1002/1000/?random);
  background-cover: cover;
  width: 500px;
  height: 300px;
  background-position: 50%;
  margin-left: 30px;
  position: relative;
}

.shape-wrapper {
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 200px;
  padding: 20px 50px 20px 20px;
  overflow: hidden;
}

.shape::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: -60px;
  left: -20px;
  right: 20px;
  width: 100%;
  background: #1e5799;
  /* Old browsers */
  background: -moz-linear-gradient(top, #1e5799 0%, #1e5799 46%, #7db9e8 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1e5799 0%, #1e5799 46%, #7db9e8 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1e5799 0%, #1e5799 46%, #7db9e8 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
  /* IE6-9 */
  -webkit-transform: skew(10deg);
  -moz-transform: skew(10deg);
  -o-transform: skew(10deg);
  transform: skew(10deg);
}

.shape span {
  position: relative;
  z-index: 2;
}
<div class="holder">
  <div class="shape-wrapper">
    <div class="shape">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
      </span>
    </div>
  </div>
</div>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 273271

you may try :after element and apply skew transformation like this :

.holder {
  background-image: url(https://unsplash.it/1002/1000/?random);
  background-cover: cover;
  width: 500px;
  height: 300px;
  background-position: 50%;
  margin-left: 30px;
  position: relative;
}

.shape {
  position: absolute;
  left: -20px;
  bottom: -20px;
  width: 200px;
  padding: 20px 40px 20px 20px;
  background: #1e5799; /* Old browsers */
  background: linear-gradient(to bottom, #1e5799 0%,#1e5799 46%,#7db9e8 100%);
}
.shape:after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -20px;
    width: 35px;
    background: #000;
    transform: skew(10deg);
    background: linear-gradient(to bottom, #1e5799 0%,#1e5799 46%,#7db9e8 100%);
}
<div class="holder">
  <div class="shape">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  </div>
</div>

To have the shape in the other direction just change the value of skew from 10deg to -10deg

Upvotes: 3

Related Questions