响应式CSS三角形

Question

你好如何像这张图片一样创建响应式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%);
}

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

注意全屏运行代码段。

Answer 1

您可以使用vw而不是％或px。这将使它基于屏幕宽度响应，但当父容器使用Bootstrap媒体查询跳转到不同大小时不会真正起作用 - 不知道如何解决这个问题。

Answer 2

您无法使用边框宽度的CSS百分比值。 您可以使用javascript实现此目的。

这是一个例子，当用户调整窗口大小时，它基本上会改变#arrow的宽度。在dom准备好了。

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;