Question

所以我想创建一个响应式梯形，你可以在其中应用边框和背景颜色我已经使用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>

谢谢你们：）

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

具有边框和背景颜色的纯CSS响应式梯形

1 个答案: