纯css写出菱形图案

一位路过的undefined

已于 2022-02-16 17:33:53 修改

阅读量590

点赞数

文章标签： css css3 html

于 2022-02-16 17:33:10 首次发布

本文链接：https://blog.csdn.net/Zzhwkpd/article/details/122968493

版权

.arrow{
  width: 120px;
  height: 40px;
  /* border:1px solid #000; */
  position: relative;
}
.arrow::before{
  content:'';
  position: absolute;
  width: 80%;
  height: 50%;
  /* background: red; */
  left:50%;
  transform: skewX(45deg) translateX(-50%);
  border:1px solid #aaa;
  border-bottom: none;
}
.arrow::after{
  content:'';
  position: absolute;
  width: 80%;
  height: 50%;
  /* background: red; */
  left:50%;
  top:50%;
  border:1px solid #aaa;
  border-top: none;
  transform: skewX(-45deg) translateX(-50%)
}