Horizontally Center Small Triangle at Bottom of Div and Resize Responsively and Proportionately

Horizontally center small triangle at bottom of div and resize responsively and proportionately

Responsive triangles with PURE CSS and without media queries.

See this codeitdown article

FIDDLE

Resize the window and watch the triangle resize responsively !

Markup

<div class="top">
    <div class="triangle-down"></div>
</div>
<div class="bottom"></div>

CSS

.top
{
    background: pink;
    height: 100px;
    position: relative;
}

.bottom
{
    background: lightGreen;
    height: 100px;
}
.triangle-down{
    width: 2.5%;
    height: 0;
    padding-left:2.5%;
    padding-top: 2.5%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;  /* center the arrow */
    margin:auto;  /* center the arrow */
    top: 100px; /* height of top section */
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-50px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid pink;
}

How the heck does it work?

Well, firstly we need to decide two things:

1) The width/height ratio of the triangle. In the above example (and for simplicity) I used a ratio of 2:1.

2) How much of the container/viewport width we want our triangle to take up. In the above example I used a triangle of 5% of the viewport width: (width 2.5% + padding-left:2.5%;)

Now set up the other properties /proportions according to the following rules: (from above article)

1) (padding-left + width)/padding-top = (border-left +
border-right)/border-top = base/height

2) margin-left = -border-left = -border-right

3) margin-top = -border-top

4) width = padding-left

Customizing the responsive triangle:

Let's say you wanted a triangle of ratio 3:1 and for it to take up 6% of the width..

No problem!

ANOTHER FIDDLE (This one actually looks more like the picture)

Modify CSS to this:

.triangle-down{
    width: 3%;
    height: 0;
    padding-left:3%;
    padding-top: 2%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;
    margin:auto;
    top: 100px;
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-33px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 33px solid pink;
}

Enjoy!

Make a CSS generated triangle appearing at the bottom of the div half the size

If you change: padding-left:1.5%;
padding-top: 1%; within the triangle-down it should change the size to half of what you originally had.

Updated Fiddle to also change width: 1.5%;

I hope this is what you were looking for.

Placement of a triangle at the bottom of a div, when divs are nested, etc

You can replace it here:

<div class="bg-layer" style="background-color: rgb(158, 27, 52); height: 227px;" data-inertia="0.1">
  <div class="triangle-down"></div>
</div>

And rewrite top:100% to top:0 in class triangle-down.

http://jsfiddle.net/hTp6y/1/

CSS: make div width proportional to height

I've been wondering about a pure-css solution to this problem for a while. I finally came up with a solution using ems, which can be progressively enhanced using vws:

See codepen link for full working demo and explanation:

http://codepen.io/patrickkunka/pen/yxugb

Simplified version:

.parent {
  font-size: 250px; // height of container
  height: 1em;
}

.child {
  height: 100%;
  width: 1em; // 100% of height
}

Shape with a slanted side (responsive)

There are many ways to create the shape with a slanted edge only on one side.

The following methods cannot support dynamic sizes as already mentioned in the question:

• Border triangle method with pixel values for border-width.
• Linear gradients with the angle syntax (like 45deg, 30deg etc).

The methods that can support dynamic sizes are described below.

---

Method 1 - SVG

(Browser Compatibility)

SVG can be used to produce the shape either by using polygons or paths. The below snippet makes use of polygon. Any text content required can be positioned on top of the shape.

$(document).ready(function() {  $('#increasew-vector').on('click', function() {    $('.vector').css({      'width': '150px',      'height': '100px'    });  });  $('#increaseh-vector').on('click', function() {    $('.vector').css({      'width': '100px',      'height': '150px'    });  });  $('#increaseb-vector').on('click', function() {    $('.vector').css({      'width': '150px',      'height': '150px'    });  });})

div {  float: left;  height: 100px;  width: 100px;  margin: 20px;  color: beige;  transition: all 1s;}.vector {  position: relative;}svg {  position: absolute;  margin: 10px;  top: 0px;  left: 0px;  height: 100%;  width: 100%;  z-index: 0;}polygon {  fill: tomato;}.vector > span {  position: absolute;  display: block;  padding: 10px;    z-index: 1;}.vector.top > span{  height: 50%;  width: 100%;  top: calc(40% + 5px); /* size of the angled area + buffer */  left: 5px;  }.vector.bottom > span{  height: 50%;  width: 100%;  top: 5px;  left: 5px;  }.vector.left > span{  width: 50%;  height: 100%;  left: 50%; /* size of the angled area */  top: 5px;  }.vector.right > span{  width: 50%;  height: 100%;  left: 5px;  top: 5px;  }

/* Just for demo */
body {  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);}
polygon:hover, span:hover + svg > polygon{  fill: steelblue;}
.btn-container {  position: absolute;  top: 0px;  right: 0px;  width: 150px;}
button {  width: 150px;  margin-bottom: 10px;}
.vector.left{  clear: both;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="vector bottom">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 40,0 40,100 0,60" />  </svg></div><div class="vector top">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,40 40,0 40,100 0,100" />  </svg></div><div class="vector left">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 40,0 40,100 20,100" />  </svg></div><div class="vector right">  <span>Some content</span>  <svg viewBox="0 0 40 100" preserveAspectRatio="none">    <polygon points="0,0 20,0 40,100 0,100" />  </svg></div>
<div class='btn-container'>  <button id="increasew-vector">Increase Width</button>  <button id="increaseh-vector">Increase Height</button>  <button id="increaseb-vector">Increase Both</button></div>

---

Related Topics