CODEWITHSUNDEEP
htmlcssfirefoxresponsive-designshapes
singmotor
singmotor

Reputation: 4180

CSS responsive, Equilateral triangle, for firefox

I know this question has been asked in another form very popularly here: How do CSS triangles work?

and I have extensively read the entire thread, but it does not address what I'm trying to do.

I want to make a cross-browser equilateral triangle clip that is responsive.

I found a lot of css like this that uses pixels:

#triangle-up {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 100px solid red;
}

But it's not responsive. I'm currently drawing it using polygon below like so:

.tri-Up {
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

But this is not compatible in Firefox. I've been exploring this question for weeks, but have yet to find a way to clip a equilateral triangle, have it be responsive, and have it work in firefox, chrome, and Safari.

Any thoughts or attempts/success at this would garner much of my appreciation and respect.

Upvotes: 2

Views: 1712

Answers (2)

RGLSV
RGLSV

Reputation: 2058

Yeah it can be done, I needed that a while ago, and found a solution to this issue right here:

  • you can use a <div> or some other that you think it can represent a triangle, and a :pseudo selector from it (actually you can use 2x <div> and leave out the :pseudo selector)
  • the :pseudo selector can be used to represent the triangle itself, like you posted in your question, with border prop.
  • the parent <div> acts like a mask that either shrinks/grows the :pseudo selector, using a combination of width and padding specified in percetage
  • as this mask grows, with your container, more of the triangle is revealed and as soon as it shrinks, it covers up the triangle
  • the border prop set on the :pseudo element acts like a max-width to which the triangle will grow, so you can specify some larger values to it, to the point you think that will the max that it needs to be

Kudos for the author of this solution, and more about this:

Check out the demo here or the snippet bellow:

*,
*:after,
*before {
  box-sizing: border-box;
}
h3 {
  margin: 10px;
  text-align: center;
}
.small-container {
  max-width: 10%;
  float: left;
}
.medium-container {
  max-width: 30%;
  float: left;
}
.large-container {
  float: left;
  max-width: 50%;
}
.fancy-triangle {
  width: 50%;
  height: 0;
  padding-left: 50%;
  padding-bottom: 50%;
  overflow: hidden;
}
.fancy-triangle:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -2000px;
  border-left: 2000px solid transparent;
  border-right: 2000px solid transparent;
  border-bottom: 2000px solid #4679BD;
}
<h3>Now isnt that nice?</h3>
<div class='fancy-triangle'></div>

UPDATE

Ok, since you need to actually mask a image in a sorta responsive triangle, the above method wont cut it.

Instead, you could use a svg and some percentage clip path points like so:

  • use the svg to draw up a triangle, used to clip the image if the clip-path isnt working properly custom points/shapes
  • then use the clip-path to draw a triangle with custom percentage points representing a triangle

Alternatively, you could a position absolute on the <img> wrapper, and set the width/height in some percentage values that will be bound to a set parent with a position relative, that will then grow/shrink with it.

UPDATE V3

Instead of using a <img> tag you could alternatively use a <svg> with the src attr of you're image and it should work out pretty nice.

.fancy-triangle-image {
    max-width: 1200px;
    -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    clip-path: url(#triangle);
}
.fancy-triangle-image img{
    width: 100%;
}
<div class='fancy-triangle-image'>
    <img src='http://insolitebuzz.fr/wp-content/uploads/2014/10/test-all-the-things.jpg'/>
</div>
<svg display="none;">
  <defs>
    <clipPath id="triangle">
      <polygon points="150 0, 300 300, 0 300" />
   </clipPath>
  </defs>
</svg>

Upvotes: 2

JustH
JustH

Reputation: 1402

The best bet I can think of is using vw as your unit on the triangle, as this is the only responsive unit that you can use in the border property. See gist here http://sassmeister.com/gist/1b0d70bf4cc35ff05fec

Browser support for vw is pretty good. http://caniuse.com/#search=vw

Upvotes: 1

Related Questions