[分享]css两个平行四边形用线连接

在网页设计中，平行四边形是一个常见的图形元素，可以用来突出某些特定内容。而用线将两个相邻的平行四边形连接起来，可以让页面更加整洁、美观。下面是使用CSS实现两个平行四边形连接的方法。.trapezoi...

在网页设计中，平行四边形是一个常见的图形元素，可以用来突出某些特定内容。而用线将两个相邻的平行四边形连接起来，可以让页面更加整洁、美观。下面是使用CSS实现两个平行四边形连接的方法。

.trapezoid1 {
  width: 0;
  height: 0;
  border-bottom: 100px solid #4CAF50;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.trapezoid2 {
  width: 0;
  height: 0;
  border-top: 100px solid #4CAF50;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.line {
  border-bottom: 2px dotted #4CAF50;
  width: 200px;
  margin: 0 auto;
  position: relative;
  top: -50px;
} 

以上CSS代码中，.trapezoid1和.trapezoid2分别表示两个平行四边形，使用border属性来设置宽度、高度和边框样式。其中，border-left和border-right都设置了50px，因此这两个平行四边形是等腰的。而.line则表示用于连接两个平行四边形的线，使用border-bottom属性设置线的样式为2px虚线，颜色为#4CAF50。此外，还需要设置宽度为200px、居中显示，并将位置向上移动50px，以与平行四边形相连接。

在HTML代码中，只需要将两个平行四边形和连接线以一个容器的形式呈现出来即可：

<div class="container">
  <div class="trapezoid1"></div>
  <div class="trapezoid2"></div>
  <div class="line"></div>
</div> 

通过以上CSS和HTML代码，两个平行四边形就可以被连接在一起了。如果需要使用不同的颜色或大小，只需要相应地修改CSS代码即可。这种方法简单实用，可以有效地提升网页设计的美感。