**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:

[![enter image description here](https://i.stack.imgur.com/YahvO.jpg)](https://i.stack.imgur.com/YahvO.jpg)

**Here my simple code:**

```css
/*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%);
}
```

```html
<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.