Hello I'm looking to create a responsive CSS triangle similar to the image linked below. I attempted using percentages with border width, but didn't achieve the desired outcome. Can anyone suggest a simple solution?
https://i.stack.imgur.com/YahvO.jpg
Here is my attempt:
/*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 Please view code snippet in fullscreen mode.