css实现平行四边形

小李很认真

于 2024-07-29 11:18:37 发布

阅读量219

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/lingrer/article/details/140766401

版权

事例：

实现一个规则的平行四边形

<div class="data-1">
  <span class="text">数据分析二</span>
</div>

.data-1 {
   transform: skewX(45deg);
   background-color: #ffffff; 
}
.text{
//字体不倾斜
   display: inline-block;
   transform: skewX(-45deg);
}

实现一个只有一边倾斜的平行四边形

<div class="data-1 data-l-s">
   <span class="data-1"></span>
   <span class="text">数据分析一</span>
</div>

.data-1 {
  &.data-l-s {
     width: 500px;
     text-align: left;
     margin-left: 37px;
   }
   background-color: #ffffff;
   width: 300px;
   transform: skewX(45deg);
   text-align: center;
   font-size: 18px;
   margin-left: 20px;
   .data-1 {
    //位置可根据实际位置调整
     position: absolute;
     left: -45px;
     top: 0;
     height: 50px;
     width: 50px;
     background-color: #ffffff;
     transform: skewX(-45deg);
     }
     .text{
      display: inline-block;
      transform: skewX(-45deg);
     }
    }