[分享]css写一个两端是尖尖的长方形

CSS是网页前端开发中最基础的技术之一，它可以帮助我们控制网页的样式，并且可以实现一些特殊的效果，比如：创建一个两端尖尖的长方形。.box{ width: 200px; height: 100px; ...

CSS是网页前端开发中最基础的技术之一，它可以帮助我们控制网页的样式，并且可以实现一些特殊的效果，比如：创建一个两端尖尖的长方形。

.box{
  width: 200px;
  height: 100px;
  background-color: #f2f2f2;
  position: relative;
}
.box::before, .box::after{
  content: ';
  width: 0;
  height: 0;
  position: absolute;
  bottom: -10px;
  z-index: 1;
  border-style: solid;
  border-width: 0 10px 10px 10px;
}
.box::before{
  left: -3px;
  border-color: transparent transparent #f2f2f2 transparent;
}
.box::after{
  right: -3px;
  border-color: transparent transparent transparent #f2f2f2;
} 

以上就是实现这个效果的代码，通过设置位置、边框样式和颜色，我们成功的创建了一个两端尖尖的长方形，这对于美化网页的设计非常有用。