Responsive CSS Triangle With Percents Width

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 Angled CSS Triangles with Percentages

You can use borders to create triangles. Border width is what you have to play with to make the size how you want it (I just went with full-screen width).

body {  margin: 0;  background: #333;}
.overlay {  width: 0;  height: 0;  border-style: solid;  border-width: calc(50vw/6) 50vw;  border-color: rgba(237, 75, 98, 0.4) rgba(237, 75, 98, 0.4) #fff #ed4b62;}

<div class="overlay"></div>

CSS Responsive Triangle Width

.triangle {
    color: crimson;
    width: 0;
    height: 0;
    margin-top: 30%;
    border-top: 100px solid crimson;
    border-left: 50vw solid transparent; /* check border size here! */
    border-right: 50vw solid transparent; /* and here! */
}

Sample fiddle.

creating a css triangle in percentage

I found the solution by using javascript instead of percentage,
Fiddle
I hope this can help some other people as well

The java script i used is this:

$(document).ready(setSize());

function setSize() {
   var halfWidth = ($('.div1').width()) / 2;   
   $('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px'));
   $('.div2').css('top', ($('.div1').height()));
}

Make my border triangle responsive

I have updated your code example: since you wanted to make it responsive to the full browser width, it's pretty straightforward:

#one {    width: 100vw;    background-color: aqua;    height: 300px;}
#two {    border-top: 100px solid red;    border-right: 50vw solid transparent;    border-bottom: 100px solid transparent;    border-left: 50vw solid transparent;    width: 0;    height: 0;}

<div id="one"></div><div id="two"></div>

CSS triangle border-width does not work with percentage value relative to the parent

border-width cannot have a percentage value. The permitted values are:

<line-width> = <length> | thin | medium | thick

Where <length> is a <number> followed by length units: px, em, rem, ....

That being said, one possible CSS option is to use viewport relative unit vw to set the width of the border according to the width of the viewport.

In that case, you just need to calculate the width of the parent element relative to the width of the viewport. If the parent fill the entire horizontal space, go with 100vw; If it fills the half of viewport: 50vw and so on.

body { margin: 0; }
div {  height:0;  border-width:0 0 100px 100vw;  border-color:transparent red red transparent;  border-style:solid;}

<div></div>

Adding triangles with CSS that are responsive

You can use clip-path on a pseudo element to create the graph-like zig zag and background images on another pseudo element to place the blue dots.

It is important to note that everything has to be done in relative terms, e.g. %s, so that the whole is responsive.

While this is pretty straightforward for the zig zag, adjustments have to be made to the placing of the dots as things are placed relative to their top left corner not relative to their center, which is what we require for the circles.

Also the height of the 'background' (the zigzag plus a little bit below the green to accomodate the circle at the bottom) has to be specified in terms of the width. Eventually CSS aspect-ratio will be useful for this but just at the moment not all browsers support it so this snippet uses the well-known hack of defining an element's height in terms of padding (the units for which are always the width's).

* {
  padding: 0;
  margin: 0;
}

.graphbg {
  background: white;
  width: 100vw;
  height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
}

.graphbg::before,
.graphbg::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  --w: 4;
  /* set these so --w/--h is the proportion of width to height you want this background to have */
  --h: 1;
  /* soon you will be able to use aspect-ratio: 4 / 1 but currently, August 2021, Safari IOS does not support it */
  height: 0;
  padding-top: calc( var(--h) / var(--w) * 100%);
  /* to force the element to have the right height */
}

.graphbg::before {
  background: green;
  clip-path: polygon(0 0, 98% 0, 50% 95%, 25% 50%, 0 95%);
}

.graphbg::after {
  background-image: radial-gradient(circle, blue 0 70%, transparent 70% 100%), radial-gradient(circle, blue 0 70%, transparent 70% 100%), radial-gradient(blue 0 70%, transparent 70% 100%), radial-gradient(blue 0 70%, transparent 70% 100%);
  background-repeat: no-repeat;
  background-size: 2% 8%;
  background-position: -1% 99%, 24.5% 50%, 50% 97%, 99% -4%;
}

<div class="graphbg"></div>

Responsive triangle div

You can use transform-rotate and a pseudo element to create a responsive triangle. This technique is detailed here : CSS triangles with transform rotate.

For your specific case it could look like this :

DEMO

.tr{    padding-bottom:30%;    position:relative;    overflow:hidden;}.tr:before{    content:'';    position:absolute;    top:0; left:0;    width:120%; height:100%;    background-color : #0079C6;        -webkit-transform-origin:0 100%;    -ms-transform-origin:0 100%;    transform-origin:0 100%;        -webkit-transform: rotate(-17deg);    -ms-transform: rotate(-17deg);    transform: rotate(-17deg);}.content{    position:absolute;}

<div class="tr">    <div class="content"> ... CONTENT HERE ...</div></div>

Responsive CSS Triangle With Percents Width