当前位置： 首页 > article >正文

css 切角实现（全）

article 2024/10/24 10:14:41
  • 效果
    在这里插入图片描述
  • 样式代码
<template>
  <div class="container">
    <div class="clip-all-angle"> 4个角全部剪切 </div>
    <div class="clip-two-angle"> 切底部两个角 </div>
    <div class="clip-two-top-angle"> 切顶部两个角 </div>
    <div class="clip-remove-top-left-angle"> 切除了左上外3个角 </div>
    <div class="clip-remove-top-right-angle"> 切除了右上外3个角 </div>
    <div class="clip-remove-bottom-left-angle"> 切除了左下外3个角 </div>
    <div class="clip-remove-bottom-right-angle"> 切除了右下外3个角 </div>
    <div class="clip-top-left"> 左上角切角 </div>
    <div class="clip-top-right"> 右上角切角 </div>
    <div class="clip-bottom-right"> 右下角切角 </div>
    <div class="clip-bottom-left"> 左下角切角 </div>
    <div class="clip-top-left-to-bottom-right"> 左上-右下角对切角 </div>
    <div class="clip-top-right-to-bottom-left"> 右上-左下角对切角 </div>
    <div class="clip-two-angle2"> 切底部两个角内部加背景 </div>
  </div>
</template>

<script setup lang="ts"></script>

<style style="scss" scoped>
.container {
  width: 100vw;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  div {
    margin-right: 20px;
  }
}
.clip-all-angle {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  clip-path: polygon(
    15px 0px,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 15px
  );
  background:
    linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,
    linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,
    linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left,
    linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
  border: 1px solid #a9c1d2;
}
.clip-two-angle {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    15px 0px,
    100% 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 0
  );
  background:
    linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,
    linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left;
}
.clip-two-top-angle {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    15px 0px,
    calc(100% - 15px) 0,
    100% 15px,
    100% 100%,
    calc(100% - 15px) 100%,
    15px 100%,
    0 100%,
    0 15px
  );
  background:
    linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left,
    linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-remove-top-left-angle {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    0 0px,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 15px
  );
  background:
    linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,
    linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,
    linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-remove-top-right-angle {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    15px 0px,
    100% 0,
    100% 0,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 15px
  );
  background:
    linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,
    linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,
    linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left;
}
.clip-remove-bottom-left-angle {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    15px 0px,
    calc(100% - 15px) 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%,
    0 calc(100% - 15px),
    0 15px
  );
  background:
    linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,
    linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left,
    linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-remove-bottom-right-angle {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    15px 0px,
    calc(100% - 15px) 0,
    100% 15px,
    100% 100%,
    100% 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 15px
  );
  background:
    linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,
    linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left,
    linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-top-left {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    15px 0,
    100% 0,
    100% 0,
    100% 100%,
    100% 100%,
    0 100%,
    0 calc(100% - 15px),
    0 15px
  );
  background: linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left;
}
.clip-top-right {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0% 100%, 0 100%, 0 0);
  background: linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-bottom-right {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%,
    0 100%,
    0 0
  );
  background: linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right;
}
.clip-bottom-left {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0);
  background: linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left;
}
.clip-top-left-to-bottom-right {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    15px 0,
    100% 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    0 100%,
    0 calc(100% - 15px),
    0 15px
  );
  background:
    linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,
    linear-gradient(135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top left;
}
.clip-top-right-to-bottom-left {
  width: 250px;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 100px;
  border: 1px solid #a9c1d2;
  clip-path: polygon(
    0 0,
    calc(100% - 15px) 0,
    100% 15px,
    100% 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 0
  );
  background:
    linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,
    linear-gradient(-135deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) top right;
}
.clip-two-angle2 {
  width: 250px;
  height: 280px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 280px;
  border: 1px solid transparent;
  clip-path: polygon(
    15px 0px,
    100% 0,
    100% 15px,
    100% calc(100% - 15px),
    calc(100% - 15px) 100%,
    15px 100%,
    0 calc(100% - 15px),
    0 0
  );
  background:
    linear-gradient(-45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom right,
    linear-gradient(45deg, #a9c1d2 10.2px, rgba(0, 0, 0, 0) 0) bottom left,
    linear-gradient(180deg, #dceefe 0%, #edf1fa 100%);
  border-top: none;
  border-image: linear-gradient(180deg, rgba(169, 193, 210, 0), rgba(169, 193, 210, 1)) 2 2;
}
</style>

http://www.kler.cn/news/362851.html

相关文章：

  • kali的下载与配置
  • 2.1 ＞ Shell 是什么、如何更熟练的使用 Bash Shell
  • 界面控件DevExtreme中文教程 - 如何与Amazon S3和Azure Blob存储集成？
  • Rust : FnOnce、线程池与多策略执行
  • 安全光幕的工作原理及应用场景
  • [Hbase]一 HBase基础
  • ffmpeg的视频滤镜: 抠图-chromakey
  • MongoDB 安装教程（MAC版本）
  • react 基础学习笔记
  • 数据降维与主成分分析
  • Python项目内网环境pdm install超时httpx.ReadTimeout: timed out
  • VMware虚拟机中centos磁盘扩容（非VG分区挂载方案）
  • RabbitMQ 中的交换机学习
  • 项目实战-图书管理系统之个人中心
  • 【02】RabbitMQ客户端应用开发实战
  • gin入门教程（7）： 使用 Logrus + Lumberjack 创建日志中间件
  • 【RabbitMQ】如何在 Ubuntu 安装 RabbitMQ
  • react1816中的setState同步还是异步的深层分析
  • 【p2p、分布式，区块链笔记 Blockchain】truffle002 unleashed_rentable_nft 项目
  • 深入理解 IP 协议
  • 大物 真空中的静电场
  • 微前端之模块联邦架构
  • Linux 中 .bash_history、.bash_logout 等用户配置文件
  • Linux杀毒-KVRT
  • 黑马javaWeb笔记重点备份12：yml格式配置文件
  • visual studio设置修改文件字符集方法