将 CSS 形状的边框宽度设置为始终形成三角形答案

【问题标题】：Set border widths of the CSS shape to always form a triangle将 CSS 形状的边框宽度设置为始终形成三角形
【发布时间】：2017-11-10 16:28:48
【问题描述】：

我正在寻找一种方法来设置底部（绿色）形状的边框宽度，使其始终形成一个向下的三角形 - 类似于左边框和右边框的百分比为 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>

【问题讨论】：

标签： html css css-shapes

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

谢谢，但这只是将宽度设置为 100%，它不会形成一个向下的三角形。我已经删除了那行文字，因为它可能令人困惑

【解决方案4】：

设法通过很少的媒体查询来做到这一点。如果宽度为 320px，则将这些样式应用于#container::after:，根据需要增加

   border-left: 160px solid transparent;
    border-right: 160px solid transparent;
    width: 84%;

【讨论】：