html - 将 CSS 形状的边框宽度设置为始终形成三 Angular 形

Question

我正在寻找一种方法来设置底部(绿色)形状的边框宽度，以便它始终形成一个向下的三 Angular 形 - 类似于 border-left 和 border-right 的百分比为 50%。高度应该保持不变。任何想法如何实现这个？这里还有一支笔:https://codepen.io/anon/pen/yPMNPZ

.par {
  width: 320px;
  height: 500px;
  background-color: lightgrey;
}

#container {
  background-color: #ccc;
  position: relative;
}

#container::after {
  border-top: 50px solid green;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  bottom: -550px;
  content: "";
  position: absolute;
  width: 100%;
}

<div class="par">
  <div id="container"></div>
</div>

Answer 1

不确定我是否理解您的问题。但是你在找这个吗？添加了以下代码:

.par {
  width: 320px;
  height: 500px;
  background-color: lightgrey;
}

#container {
  background-color: #ccc;
  position: relative;
}

#container::after {
    border-top: 50px solid green;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    bottom: -599px;
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 160px 0 160px;
}

<div class="par">
  <div id="container"></div>
</div>