带边框和背景颜色的纯 CSS 响应式梯形答案

【问题标题】：Pure CSS Responsive Trapezoid with borders and background colour带边框和背景颜色的纯 CSS 响应式梯形
【发布时间】：2016-07-03 16:52:53
【问题描述】：

所以我想创建一个响应式梯形，您可以在其中应用边框和背景颜色我已经使用 3 个 div 块创建了一个，但是当宽度和高度发生变化时，我无法让梯形顶部的边框保持内联所以我的问题是。有人可以帮我弄清楚如何使梯形顶部的线与左右边框保持一致或者如果有人知道不同的解决方案？这是我的代码....

.trapezoid-container{
  	position: relative;
  margin-left: 100px;
  width: 200px;
  height: 200px;
  
  }
.trapezoid {
	background: green;
	position: relative;
	position:absolute;
  	content:"";
	width: 70%;
	height: 100%;
	border-top: 5px solid black;
	border-bottom: 5px solid black;	
	left: 20px;
}
.trapezoid:before {
	background: green;
	position:absolute;
  	content:"";
	width: 60%;
height: 100%;
left: 63%;
border-right: 5px solid black;
border-bottom: 5px solid black;
transform: skew(20deg);	
}
.trapezoid:after {
	background: green;
	position:absolute;
  	content:"";
	width: 60%;
height: 100%;
left: -28%;
border-left: 5px solid black;
border-bottom: 5px solid black;
transform: skew(-20deg);
}

<div class="trapezoid-container">
<div class="trapezoid">
</div>
  </div>

谢谢大家:)

【问题讨论】：

这个主题（svg、canvas）的内容怎么样？ stackoverflow.com/questions/7920754/…
其实看了这个题目却错过了页面宽度上的第二个答案：30%；高度：50%；背景：红色；变换：透视（2px）旋转X（1度）；边距：50px；边框：纯色 4px 黑色；编辑了其中一个答案，效果完美！做我想要的工作吗，谢谢你的回复：D
理想情况下，如果您有时间，请为您的问题创建一个答案；）

标签： html css

【解决方案1】：

在How to draw a trapezium/trapezoid with css3? 上找到了一个更好的解决方案，它回答了我的问题，我想把它贴出来

#container {
	position: relative;
	margin-left: 200px;
width: 200px;
height: 200px;
	
}

.trapezoid {
	position: relative;
	  width: 30%;
  height: 50%;
  background: red;
  transform: perspective(2px) rotateX(1deg);
  border: solid 4px black;
  left: 20%;
  top: 70%;
}

<div id="container">
<div class="trapezoid">

</div></div>

【讨论】：