css弧边选项卡的项目实践


Posted in HTML / CSS onMay 07, 2023

实现效果

css弧边选项卡的项目实践

实现方式

主要使用了

等属性

思路

只需要想清楚如何实现弧形三角即可。这里还是借助了渐变 -- 径向渐变

css弧边选项卡的项目实践

其实他是这样,如下图所示,我们只需要把黑色部分替换为透明即可,使用两个伪元素即可:

css弧边选项卡的项目实践

通过超出隐藏和旋转得到想要的效果

css弧边选项卡的项目实践

css弧边选项卡的项目实践

综上

在上述 outside-circle 的图形基础上:

  • 设置一个适当的 perspective 值
  • 设置一个恰当的旋转圆心 transform-origin
  • 绕 X 轴进行旋转动图演示

css弧边选项卡的项目实践

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .g-container {
    position: relative;
    width: 300px;
    height: 100px;
    background: red;
    border: 1px solid #277f9e;
    border-radius: 10px;
    overflow: hidden;
}
.g-inner {
    position: absolute;
    width: 150px;
    height: 50px;
    background: #fee6e0;
    bottom: 0;
    border-radius: 0 20px 0 20px;
    transform: perspective(40px) scaleX(1.4) scaleY(1.5) rotateX(20deg) translate(-10px, 0);
    transform-origin: 50% 100%;
}
.g-inner::before {
    content: "";
    position: absolute;
    right: -10px;
    width: 10px;
    height: 10px;
    top: 40px;
    background: radial-gradient(circle at 100% 0, transparent, transparent 9.5px, #fee6e0 10px, #fee6e0);
}
.g-after {
    position: absolute;
    width: 150px;
    height: 50px;
    background: #6ecb15;
    bottom: 49px;
    right: 0;
    border-radius: 20px 0 20px 0;
    transform: perspective(40px) scaleX(1.4) scaleY(-1.5) rotateX(20deg) translate(14px, 0);
    transform-origin: 53% 100%;
}
.g-after::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 40px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 0 0, transparent, transparent 9.5px, #6ecb15 10px, #6ecb15);
}
.g-inner-text,.g-after-text {
  position: absolute;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.g-inner-text {
  top: 50%;
  left: 0;
}
.g-after-text {
  top: 50%;
  right: 0;
}
</style>
<body>
  <div class="g-container">
    <div class="g-inner"></div>
    <div class="g-after"></div>
    <div class="g-inner-text">选项卡1</div>
    <div class="g-after-text">选项卡2</div>
  </div>
</body>
</html>

参考文章:https://github.com/chokcoco/iCSS/issues/224

到此这篇关于css弧边选项卡的项目实践的文章就介绍到这了,更多相关css弧边选项卡内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 #HTML / CSS
CSS实现鼠标悬浮动画特效
CSS link与@import的区别和用法解析
May 07 #HTML / CSS
html,css,javascript是怎样变成页面的
May 07 #HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 #HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 #HTML / CSS
使用CSS实现百叶窗效果示例代码
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
python集合常见运算案例解析
2019/10/17 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
自我评价怎么写好呢?
2013/12/05 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
大学生学习计划书
2014/09/15 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
安全生产标语大全
2014/10/06 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
电影圆明园观后感
2015/06/03 职场文书
《打电话》教学反思
2016/02/22 职场文书
《正比例》教学反思
2016/02/23 职场文书