css clip-path直角梯形

优雅格子衫

于 2024-05-04 20:22:09 发布

阅读量192

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_61869009/article/details/138449432

版权

 <div class="buy-baseanli-pack">
   <div class="left_btn">购买基础包</div>
   <div class="right_btn">购买案例包</div>
</div>

.buy-baseanli-pack {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 40px;
}
.left_btn {
  width: 50%;
  background-color: #00ADEB;
  color: #fff;
  height: 40px;
  text-align: center;
  border-radius: 22px 0px 0px 22px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}
.right_btn {
  width: 50%;
  background-color: #00ADEB;
  color: #fff;
  height: 40px;
  text-align: center;
  border-radius: 0px 22px 22px 0px;
  clip-path: polygon(10% 0%,100% 0%,100% 100%, 0% 100%);
}