Responsive CSS triangle

Question

Hello How to create responsive css triangle like this image, I tried to use percent with border width but nothing, so I search for a simple solution:

Here my simple code:

/*Less Variables and Mixin*/
/*General Default Values*/
.table{
    padding:50px 0;
}
.table ul,
.table li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.table .table-nested {
  height:200px;
  padding: 0 0 20px;
  margin-bottom: 50px;
  background-color: #ffffff;
  border: 1px solid #FFE44A;
}
.table .table-nested .planType {
  margin: 0 0 20px;
  padding: 10px 5px;
  position: relative;
  background-color: #FFE44A;
  color: #333333;
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 4px;
}
.table .table-nested .planType:before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 24px 150px 0 150px;
  border-color: #FFE44A transparent transparent transparent;
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="table">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="table-nested">
                        <h2 class="planType">Business</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

Note run code snippet in fullscreen.

Your question is already answered [here](http://stackoverflow.com/questions/25360411/responsive-css-triangle-with-percents-width) — Simrandeep Singh, Mar 26 '17 at 14:56
thank you, I saw this question before but I need it responsive. — Michael Neas, Mar 26 '17 at 14:59

score 0 · Answer 1 · answered Mar 26 '17 at 15:10

0

You can use vw instead of % or px. That will make it responsive based on screen width, but doesn't really work when the parent container jumps to different sizes with the Bootstrap media queries - not sure how to fix that.

answered Mar 26 '17 at 15:10

mrseanbaines

823
2
12
25

score 0 · Answer 2 · answered Mar 26 '17 at 17:37

You can't use CSS percentage value with border width. You can achieve this using javascript.

Here's an example, basically it change the #arrow width when user resize their window & on dom ready.

window.addEventListener('resize', function(){
 resizeArrow();
});
document.addEventListener('DOMContentLoaded', function(){
 resizeArrow();
});

function resizeArrow() {
  var business = document.getElementById('business');
  var arrow = document.getElementById('arrow');
  var businessWidth = business.offsetWidth; // business width
  var businessHeight = business.offsetHeight; // business height
  arrow.style.cssText = 'border-width: '+businessHeight+ 'px '+(businessWidth / 2)+'px 0 '+(businessWidth / 2)+'px'; // set arrow border-width
}

/*Less Variables and Mixin*/
/*General Default Values*/
.table{
    padding:50px 0;
}
.table ul,
.table li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.table .table-nested {
  height: 200px;
  padding: 0 0 20px;
  margin-bottom: 50px;
  background-color: #ffffff;
  border: 1px solid #FFE44A;
}
.table .table-nested .planType {
  margin: 0 0 20px;
  padding: 10px 5px;
  position: relative;
  background-color: #FFE44A;
  color: #333333;
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 4px;
}
.table .table-nested .planType #arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0;
  border-color: #FFE44A transparent transparent transparent;
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="table">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="table-nested">
                        <h2 id="business" class="planType">Business<span id="arrow"></span></h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

Responsive CSS triangle

2 Answers2