画梯形我看行

endlesskiller2024-04-22 10:17

背景

最近业务有需求需要开发一个梯形的切换标题，当时想着梯形也不是啥奇形怪状的图形，不分分钟拿下。但是仔细看了设计稿感觉还是有挺多细节的。

梯形之间相互重叠
梯形拥有自己的边框和内部阴影
左边梯形是直角梯形
点击后背景颜色需要变更
底部边框需要隐藏

实现

这样就可以等到一个宽度300，高度100的等腰梯形了

css 复制代码

.trapezoid {
  width: 200px;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

百度还发现一个有意思的属性也可以实现一个等腰梯形

css 复制代码

.trapezoid {
  width: 200px;
  height: 100px;
  background-color: red;
  clip-path: polygon( 25% 0%, 75% 0, 100% 100%,0 100%);
}

但是上面2种方式都没办法满足条件2，一旦实现边框或者需要实现内阴影这个需求，都不得劲；

最后找到一个以前没怎么用到的属性解决了

css 复制代码

.toggle-title {
  position: relative;
  padding: 0;
  text-decoration: none;
  display: inline-block;
  width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #099aab;
  font-weight: bold;
  cursor: pointer;
}

.toggle-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #7fcbd3;
  border-bottom: none;
  transform: perspective(1em) scale(1.02, 1.3) rotateX(5deg);
  z-index: -1;
  background: #c1e6ea;
  box-shadow: 0 0 10px #7fcbd3 inset;
  transform-origin: bottom;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}

相对来说基本手写css就实现了，重点核心就在于perspective这个属性，MDN或者看看文章学习下，发现一个是控制元素纵深效果的一个属性，确实厉害，css真的永远都学不完。