前端 CSS 经典：弧形边框选项卡

涛声依旧在  金牌会员 | 2024-9-18 03:50:04 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 838|帖子 838|积分 2514

1. 效果图


2. 开始

准备一个元素，将元素左上角，右上角设为圆角。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .tab {
  9.         width: 150px;
  10.         height: 40px;
  11.         margin: 0 auto;
  12.         background: #ed6a5e;
  13.         border-radius: 10px 10px 0 0;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <div class="tab"></div>
  19.   </body>
  20. </html>
复制代码

然后要在左右双方拼接弧形，我们可以写两个伪元素
  1. .tab::before,
  2. .tab::after {
  3.   content: "";
  4.   position: absolute;
  5.   width: 10px;
  6.   height: 10px;
  7.   bottom: 0;
  8. }
  10. .tab::before {
  11.   left: -10px;
  12. }
  13. .tab::before {
  14.   right: -10px;
  15. }
复制代码

那怎么将这两个元素做成弧形呢，可以使用渐变。
  1. .tab::before {
  2.   background: radial-gradient(circle at 0 0, transparent 10px, #ed6a5e 10px);
  3. }
  4. .tab::after {
  5.   background: radial-gradient(circle at 100% 0, transparent 10px, #ed6a5e 10px);
  6. }
复制代码

这下我们有了弧形，那怎么做成效果图的样式呢，末了我们可以使用旋转。
  1. .tab {
  2.   transform: perspective(30px) rotateX(20deg);
  3.   transform-origin: center bottom;
  4. }
复制代码
 
3.完备代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .tab {
  9.         width: 150px;
  10.         height: 40px;
  11.         margin: 0 auto;
  12.         background: #ed6a5e;
  13.         border-radius: 10px 10px 0 0;
  14.         position: relative;
  15.         transform: perspective(30px) rotateX(20deg);
  16.         transform-origin: center bottom;
  17.       }
  18.       .tab::before,
  19.       .tab::after {
  20.         content: "";
  21.         position: absolute;
  22.         width: 10px;
  23.         height: 10px;
  24.         bottom: 0;
  25.         background: #000;
  26.       }
  28.       .tab::before {
  29.         left: -10px;
  30.         background: radial-gradient(
  31.           circle at 0 0,
  32.           transparent 10px,
  33.           #ed6a5e 10px
  34.         );
  35.       }
  36.       .tab::after {
  37.         right: -10px;
  38.         background: radial-gradient(
  39.           circle at 100% 0,
  40.           transparent 10px,
  41.           #ed6a5e 10px
  42.         );
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="tab"></div>
  48.   </body>
  49. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

涛声依旧在

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表