三角形及选中取消按钮的css代码
2024-10-11 20:27:19
1.三角形:
1.用传统的方式:
.triangle{
background:blue transparent transparent transparent;
border-width:100px 60px 0 60px;
border-style:solid ;
height:0 ;width:;
}
<div class="triangle">
</div>
2.用svg实现:
.svg-triangle{
margin:0 auto; width:10px;height:100px;
}
.svg-triangle polygon{
fill:blue;stroke:yellow; stroke-width:2px;
} <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
<polygon points="0,0 100,0 50,100"></polygon>
</svg>
2.移动端的选中取消按钮:
.mui-switch {
width: 52px;
height: 31px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
} .mui-switch:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left:;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
} .mui-switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
} .mui-switch:checked:before {
left: 21px;
}
.mui-switch.mui-switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
} .mui-switch.mui-switch-anim:before {
transition: left 0.3s;
} .mui-switch.mui-switch-anim:checked {
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
} .mui-switch.mui-switch-anim:checked:before {
transition: left 0.3s;
}
<label>
<input class="mui-switch mui-switch-anim" type="checkbox">
</label>
最新文章
- ASIHTTPRequest取消异步请求
- atitit.js浏览器环境下的全局异常捕获
- OpenGLES入门笔记四
- sencha touch pull-refresh-panel 面板下拉刷新
- Happy Number——LeetCode
- 使用 hibernate 存取大对象数据类型(clob和blob)
- EF 4.1 学习资源汇总
- D - DZY Loves Hash CodeForces - 447A
- SpringBoot学习之集成dubbo
- 史上最全的Spring-Boot-Starter开发手册
- 微信网页悬浮窗交互效果的web实现
- vue-cli 项目搭建
- #define GPIOA ((GPIO_TypeDef *) GPIOA_BASE)
- mybatis generator 双击创建失败
- NVelocity语法常用指令
- PPTP不使用远程网关访问公网设置
- dubbo使用的zk客户端
- UVa 10642 - Can You Solve It?
- 如何使用vsphere client 克隆虚拟机
- mongodb角色权限
热门文章
- The tag &#39;DataGridTextColumn&#39; does not exist in XML namespace ....
- 在CentOS 6.6下安装与配置mysql
- PL/SQL 存储函数和过程
- 最近面试的题目(WEB、Service、SQL、JavaScript)
- Oracle常用操作-----(一)
- 0518 Scrum项目5.0
- 设置irb和ri
- 【实践】jQuery实现三联联动
- 数据可视化:Echart中k图实现动态阈值报警及实时更新数据
- cargo failed to finish deploying within the timeout period [120000]