CSS组件_0 燕尾
CSS是传统前端“三大马车”之一,本系列专注于用CSS实现小组件,例如:燕尾、三角、箭头、风火轮等。愿积”组件“之跬步,至”系统“之千里。
目录
- 一、燕尾是个啥?
- 二、小马甲思路
- 三、小马甲实现
- 四、总结
一、燕尾是个啥?
燕尾,顾名思义,燕子的尾巴。我们都知道燕子的尾巴是分叉的,本文要实现的组件如下。
二、小马甲思路
我们很容易想到使用一个长方形来实现,但是长方形的首尾得做一些处理。
首先,在长方形的首尾添加正方形。
对于首端(左)来说,我们可以通过将正方形平移、旋转的方式形成想要的形状。
对于尾端(右)来说,进行同样的操作,最终形成了我们需要的燕尾组件。
下面我们计算下平移、旋转的数值。假设长方形高为h
、宽度为w
,正方形边长为x
。
可以知道平移的距离为x/2,旋转的角度为45°。
由 x 2 + x 2 = h 2 x^2 + x^2= h^2 x2+x2=h2 可知,
x = h 2 2 x = \sqrt{\frac{h^2}{2}} x=2h2
还有个问题,平移和旋转怎么实现呢?实际上CSS3很容易实现。
- 平移,通过指定元素postion,然后设置left/right实现
- 旋转,通过设置元素transform属性实现
三、小马甲实现
我们不妨假设长方形高h为40px
,那么正方形边长约为28px
。
<style>.c-step {position: relative;display: inline;height: 40px; /** height 即为长方形的高h **/width: 80px;padding: 0 20px 0 45px;display: flex;justify-content: center;align-items: center;background-color: #ef8825;color: white;user-select: none;}.c-step::before { /** 首端正方形 **/position: absolute;left: -14px; /** 平移距离为x/2 **/width: 28px; /** 正方形边长 **/height: 28px; /** 正方形边长 **/transform: rotate(-45deg); /** 旋转45° **/content: "";background: white;}.c-step::after { /** 末端正方形 **/position: absolute;right: -14px; /** 平移距离为x/2 **/width: 28px; /** 正方形边长 **/height: 28px; /** 正方形边长 **/transform: rotate(-45deg); /** 旋转45° **/content: "";background: #ef8825;}
</style><body><div class="c-step">燕尾</div>
</body>
四、总结
本文介绍了CSS组件——燕尾的一种实现方式:通过在长方形盒子两端加正方形,利用平移、旋转的手段形成燕尾形状。平移是通过设置元素为absolute,利用left、right属性设置相对于父元素的相对位置实现;选装是通过设置元素的transform属性实现。
基础知识关键字:绝对布局、旋转、CSS
CSS组件_0 燕尾相关推荐
- CSS组件之图形(figure)
CSS组件之图形(figure) 三角形(triangle) 上三角(triangle-up) 下三角(triangle-down) 左三角(triangle-left) 右三角(triangle-r ...
- CSS3新特性总结及CSS组件、特效汇总
本文分2部分: 之前写的CSS3新特性详解篇,共6篇博文总结: 常见的一些CSS组件.效果汇总(不包括BootStrap等前端框架已实现的CSS组件): 一.CSS3新特性总结 1.CSS3选择器.边 ...
- AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解, ...
- CSS组件:字体图标
字体图标 字体图标就是文字,只是这种文字长得和图标一样 字体图标优缺点 字体拥有的属性(字体大小.颜色等),均适用于字体图标 具有矢量性,无限放大也不会有马赛克,保证清晰度 字体图标大小相对于图片要小 ...
- 前端基础之《Bootstrap(8)—CSS组件_导航条》
一.导航条 1.nav标签:灰色小条 <nav class="navbar navbar-default"></nav> 2.头部和折叠小按钮(.navba ...
- 漂亮的html css组件边框科技炫彩蓝紫色界面
大屏展示: 创际 We charts 组件展示一 创际 We charts 组件展示二 源文件:https://gitee.com/han_meng_fei_sha/colorful_inter ...
- css 组件水平居中,CSS水平居中
一.使用CSS水平居中的三种情况 . 1.行内元素(文本.图片等): 2.定宽块状元素 : 3.不定宽块状元素(3种方法): 二.具体解决方法. 1.行内元素(文本.图片等): 给父元素设置 text ...
- .nav css,Bootstrap CSS组件之导航(nav)
本文实例为大家分享了Bootstrap导航的具体代码,供大家参考,具体内容如下 //源码 .nav { padding-left: 0; margin-bottom: 0; list-style: n ...
- Bootstrap复习四——CSS组件2
1.输入框组: 通过在文本输入框 <input> 前面.后面或是两边加上文字或按钮,可以实现对表单控件的扩展.为 .input-group 赋予.input-group-addon 类,可 ...
最新文章
- 把变量赋值给寄存器_用C语言对DSP的寄存器进行操作?
- multinormalNB多项式朴素贝叶斯原理及代码
- haiyang457 原创软件安装包代表作集合电子书
- 纯CSS3实现GIF图片动画效果
- Future获取线程返回值能使线程顺序执行?
- ADO.NET学习笔记-非链接类
- Z变换(2020.10.21)
- c#中的模态对话框和非模态对话框
- Linux 进程信号:信号的概念、生命周期、产生流程、阻塞
- android opencv 水印,关于opencv对图片添加水印
- Linux内核怎么优化,linux 内核该怎么优化
- linux查询文件md5sum,Linux下通过md5sum生成MD5文件校验MD5
- 如何在java中实现小数点自增_java保留小数的四种实现方法
- 《剑指 offer : 专项突破版》 读后感
- 实验三:CART分类决策树python实现(两个测试集)(一)|机器学习
- KVM+OVS环境虚机修改网卡为ovs网桥后启动报错
- 技术周刊(第10期):新技术又来了?
- Mob秒验(一键登录注册)是什么意思?
- hive介绍及其原理
- python绘制反比例函数_描点法画反比例函数图像的动态演示——数学软件GeoGebra制作教程...
热门文章
- wer 流程图编程_孩子学完各个阶段的编程课能够参加哪些比赛?
- USB数据端子 type-A/B/C
- 齐岳|水溶性竹红菌素PLGA纳米粒|负载奥沙利铂的mPEG-PLGA纳米粒子|包载黄豆苷元的PLGA纳米颗粒
- 工作站和台式机的区别
- 区块补习班 | 假酒害人屡禁不止?对不起我来晚了!
- 负反馈与马歇尔的均衡论
- 【烈日炎炎战后端】MySQL编程(3.6万字)
- 矩阵求逆(全选主元高斯-约当消去法)
- 一文总结经典卷积神经网络CNN模型
- Python实现base64编码文件转化为jpg/png/jpeg/格式图片