Make a css triangle/arrow grow when its parent div is resized

Question

This is my css triangle. When the parent container -which has a height percentage setting- is resized then the triangle should resize too.

How must change the below

Answer 1

You need to change the way you generate the triangle, as Mr Alien says border is not fluid.

The CSS would be:

.triangle {
    width: 40%;
    height: 40%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, black 50%, transparent 50%)
}

demo

You set the triangle dimension to the percentage of the parent that best suits you, then you make the diagonal of the triangle in black.

Changed demo so that base elements are responsive:

demo2

New demo to include your html.

demo3

I have added CSS to a bare minimum to make it work: added 100% height to body & html, added width to wrapper. Otherwise, it's your layout, so this should work.

Answer 2

Non Gradient solution to avoid Jagged lines (Fiddle)

I was looking for something exactly like @Serg Hospodarets answer but I realized that gradient is creating a jagged line, probably a rendering issue of browser. So after some searching and fiddling I made this.

Summary: I using a spacer technique answered here by Johan Rönnblom to calculate width relative to height by 1:1 ratio, then I am adding 2 boxes at the edge of div which have 50% of parent element height and width equal to that 50% creating perfect squares, then I am rotating sub element at 45deg creating the diagonal cuts.

Below is the complete code:

HTML

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, esse assumenda corporis nemo perspiciatis dolorem vero consectetur asperiores necessitatibus, ea, saepe fugit alias, voluptatum blanditiis quia! Consequatur dolorem, consectetur adipisci.
  <div class="u-prop">
    <div class="wrap">
      <img class="spacer" width="2048" height="2048" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
      <div class="proportional"></div>
    </div>
  </div>

  <div class="u-prop is--bot">
    <div class="wrap">
      <img class="spacer" width="2048" height="2048" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
      <div class="proportional"></div>
    </div>
  </div>

</div>

SCSS:

body {
  padding: 10px;
}

* {
  box-sizing: border-box;
}

.box {
  padding: 10px;
  width: 500px;
  position: relative;
  background: #eee;
  &:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-right: solid -0px transparent;
  }
}

.u-prop {
  position: absolute;
  height: 50%;
  width: 100%;
  top: 0;
  left: 100%;
  &.is--bot {
    top: 50%;
    .proportional {
      transform: rotate(-45deg);
      transform-origin: bottom left;
      &:before {
        border-bottom: 1px solid #000;
        border-top: none;
      }
    }
  }
  .spacer {
    width: auto;
    max-height: 100%;
    visibility: hidden;
  }
  .proportional {
    position: absolute;
    top: 0;
    left: 0px;
    width: 150%;
    height: 0;
    padding-bottom: 100%;
    background: #eee;
    transform: rotate(45deg);
    transform-origin: top left;
    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border-top: 1px solid #000;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
    }
  }
  .wrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    max-width: 100%;
    overflow: hidden;
  }
}

Answer 3

My solution:
http://codepen.io/malyw/pen/mhwHo/

Description:
I needed arrows to mark active sidebar menu items.
When I had multiline text in them, arrow was broken.
So mu solution is:
use :after and :before elements with linear-gradient to provide stretched arrows with the same width:

Code:

&:before { 
  top: 0px; background: linear-gradient(to right top, $color 50%, transparent 50%);
}

&:after {
  top: 50%; background: linear-gradient(to right bottom, $color 50%, transparent 50%);
}

Thanks @vals for idea.

Answer 4

This fiddle implements responsive CSS triangles using just CSS and one element. It shows up, down, left and right pointing triangles and yours is top-left pointing. The responsive down pointing triangle can be easily modified to achieve it:

.triangle-top-left {
    width: 0;
    height: 0;
    padding-bottom: 25%;
    padding-left: 25%;
    overflow: hidden;
}
.triangle-top-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: -500px;

    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}

For the explanation on the logic used for the responsive triangle see my article on Pure CSS responsive triangles.