Make a CSS Triangle/Arrow Grow When Its Parent Div Is Resized

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

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.

How to create a triangle with CSS that scales to parent div height?

I have found a solution (albeit not supported in IE) so it may not be the best way depending on circumstances.

The solution uses the background clip property:

https://jsfiddle.net/xq5wwf3h/32/

body * {
    box-sizing: border-box;
}

#triangle-container {
    position: relative;
    height: 100px;
    width: 100%;
    background: grey;
    margin-left:50px;
    color: #fff;
    padding: 15px;
}

#triangle-container:before {
    content: '';
    position: absolute;
    display: block;
    left: -25px;
    top: 0;
    bottom: 0;
    width: 25px;
    height: 100%;
    background: #007bff;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

Css arrows on pseudo element - fit height dynamically to parent

I found an interesting solution here which seems to be able to handle dynamic height - it's using linear gradient backgrounds:

/* CSS: */

.box {

  width: 400px;

  background-color: #307084;

  color: #fff;

  margin-bottom: 20px;

  padding: 10px;

  position: relative;

}

.box:before,

.box:after {

  width: 20px;

  height: 50%;

  position: absolute;

  left: 100%;

  content: "";

}

.box:before {

  top: 0px;

  background: -webkit-linear-gradient(left bottom, #307084 50%, rgba(0, 0, 0, 0) 50%);

  background: linear-gradient(to right top, #307084 50%, rgba(0, 0, 0, 0) 50%);

}

.box:after {

  top: 50%;

  background: -webkit-linear-gradient(left top, #307084 50%, rgba(0, 0, 0, 0) 50%);

  background: linear-gradient(to right bottom, #307084 50%, rgba(0, 0, 0, 0) 50%);

}

<!-- HTML: -->

<div class="box" style="font-size: 20px">

  css triangle/arrow grow when its parent div is resized

</div>

<div class="box" style="font-size: 25px;">

  css triangle/arrow grow when its parent div is resized

</div>

<div class="box" style="font-size: 40px;">

  css triangle/arrow grow when its parent div is resized

</div>

Responsive CSS triangle with percents width

You could use a skewed and rotated pseudo element to create a responsive triangle under the link :

DEMO (resize the result window to see how it reacts)

The triangle maintains it's aspect ratio with the padding-bottom property.

If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class

.btn {

  position: relative;

  display: inline-block;

  height: 50px; width: 50%;

  text-align: center;

  color: white;

  background: gray;

  line-height: 50px;

  text-decoration: none;

  padding-bottom: 15%;

  background-clip: content-box;

  overflow: hidden;

}

.btn:after {

  content: "";

  position: absolute;

  top:50px;  left: 0;

  background-color: inherit;

  padding-bottom: 50%;

  width: 57.7%;

  z-index: -1;

  transform-origin: 0 0;

  transform: rotate(-30deg) skewX(30deg);

}

/** FOR THE DEMO **/

body {

  background: url('http://i.imgur.com/qi5FGET.jpg');

  background-size: cover;

}

<a href="#" class="btn">Hello!</a>

Responsive triangle with border to container's height and width

Depending on the units you are using for your container, and if it's size depends on viewport, you can achieve this behaviour with vw/vh units :

DEMO

div{width:0;outline:1px solid red;}

.r{

    border-top:15vh solid transparent;

    border-bottom:15vh solid transparent;

    border-left:50vw solid teal;

}

.t{

    border-left:15vw solid transparent;

    border-right:15vw solid transparent;

    border-bottom: 50vh solid gold;

}

<div class="r"></div>

<div class="t"></div>

Creating a div with dynamic height and an arrow facing inwards using CSS

Using Linear Gradients:

You can do it using a couple of angled linear-gradients like in the below snippet. As you can see from the snippet, it can adapt to any height even if the content wraps around (or) if it spans multi-lines.

The shape is created as follows:

• Couple of linear-gradients (with to [side] [side] syntax) which is colored for almost 50% and transparent for the remaining 50%. Both these gradients have 50% size in Y-axis (that is, half of the element's height) and has 20px size in X-axis (meaning it has a fixed width for the triangle).
• These linear gradients are positioned at the right top and right bottom of the element to produce the triangle effect.
• One more linear-gradient (which is actually a solid color) whose size in Y-axis is 100% height of the parent and size in X-axis is 20px less than 100% (using calc). This produces the colored area aside from the triangular area.

The advantages of this approach are as follows:

• It doesn't require any extra elements (real or pseudo) and hence there is no unwanted clutter in the markup and the pseudo-elements can be used for other things.
• As can be seen in the last div, it would adapt itself even if the width of the div changes also.
• The triangular cut at the right side is transparent and so the background of the page can also be seen through the cut, if required.

The only two drawbacks of this approach are as follows:

• Gradients have a lower browser support compared to pseudo-elements (works only in IE10+) and
• At some very wide angles, the angled sides will be a bit jagged.

.shape {

  position: relative;

  width: 200px;

  color: white;

  padding: 8px;

  margin: 4px;

  background: linear-gradient(to bottom right, rgb(128, 0, 128) 49%, transparent 51%), linear-gradient(to top right, rgb(128, 0, 128) 49%, transparent 51%), linear-gradient(to right, rgb(128, 0, 128), rgb(128, 0, 128));

  background-size: 20px 50%, 20px 50%, calc(100% - 20px) 100%;

  background-position: 100% 0%, 100% 100%, 0% 0%;

  background-repeat: no-repeat;

}

.shape.wide {

  width: 300px;

}

<div class='shape'>Some div with small content</div>

<div class='shape'>Some div with large content that wraps around into multiple lines</div>

<div class='shape'>Some div with large content that wraps

  <br>around into multiple lines

  <br>even spanning multiple lines</div>

<div class='shape'>Some div with

  <br>large content that wraps

  <br>around into multiple lines

  <br>even spanning

  <br>multiple lines</div>

<div class='shape wide'>Some div with

  <br>large content that wraps

  <br>around into multiple lines

  <br>even spanning

  <br>multiple lines</div>

CSS triangle-like notch cut out of responsive div with text

Many thanks to @BobRodes for getting me set in the right direction!
I took your example and added jQuery to take the height of the div, divide it by 2 to have the values of the top and bottom borders. If the height of the div is not a whole number, then the border height is a fraction and the notch came up 1px short, so I took that into consideration and accounted for that by adding 1px in that case. I also noticed in Firefox and IE, sometimes the border was too tall (Browser rendering maybe?) and the notch hung below the content div by 1px. Chrome seemed to be fine. To get around all of this, I reversed the notch so that it was pointing to the right and made this the same color as the background color. Now if I have a 1px overhang, it will never be visible.
If I wrap my jQuery in a function and call that on resize, this is completely responsive and works with any amount of content.

Here is my code:

//find the height of the content div and use 50% of the height for the border height to create the notch

var ContentHeight = $('.Content').outerHeight(),

  BorderHeight = ContentHeight / 2,

  //we'll assume that the border-top and border-bottom will be the same, but we may need to make a tweak below

  BorderHeight2 = BorderHeight;

//if 1/2 the height of the content is a fraction, the border will be 1px short. We'll add 1px to the bottom to compensate 

if (ContentHeight % 2 === 1) {

  BorderHeight2++;

}

//add the border to create the notch

$('.Notch').css({

  'border-top': BorderHeight + 'px solid transparent',

  'border-bottom': BorderHeight2 + 'px solid transparent'

});

.Wrapper {

  position: relative;

  margin: 20px 20px 20px 50px;

}

.Notch {

  border-left: 15px solid #fff;

  left: -8px;

  position: absolute;

  top: 0;

  z-index: 9999;

}

.Content {

  width: 50%;

  color: #fff;

  position: absolute;

  background: rgba(0, 0, 0, 0) linear-gradient(to right, #055aa5 0%, #227dcd 100%) repeat scroll 0 0;

  left: -8px;

  padding: 15px 15px 15px 30px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="Wrapper">

  <div class="Notch"></div>

  <div class="Content">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>

    <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>

  </div>

</div>

---

Related Topics