设置CSS形状的边框宽度始终形成三角形

Question

我正在寻找一种方法来设置底部（绿色）形状的边框宽度，因此它总是形成一个指向下方的三角形 - 例如边框左边和右边边框的百分比为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

如果我理解你的问题，不确定。但你在找这个吗？下面的代码添加了：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

希望这会对你有所帮助。

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

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

#container:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: green;
	border-width: 160px;
	margin-left: -160px;
}

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

Answer 3

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

请在此

之后更新伪元素

宽度：计算（100％ - 120px）;

这是代码笔链接 https://codepen.io/iamlalit/full/YEZXBx/

Answer 4

通过少量媒体查询进行管理。如果width为320px，请将这些样式应用于#container :: after :,根据需要增加

fline = file.readline()