Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?
2024-09-25 15:21:10
题目点评
三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单
答题要点
1.采用的是均分原理
盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部
2.代码的实现
第一步 保证元素是块级元素
第二步 设置元素的边框
第三步 不需要显示的边框使用透明色
示例代码
- .square{
- width:0;
- height:0;
- margin:0 auto;
- border:6px solid transparent;
- border-top: 6px solid red;
- }
效果图
加分项
描述自己的心得:在开发中我们也经常设计一个带缺口的三角形效果,如下图所示。
上图效果的做法是这样的:
1.、两个三角形(底边框)的位置、大小要一致
2、里面的三角形的底边框颜色为黑色(也可以为其它颜色),外面三角形边框颜色为白色的背景
3、白色三角形要覆盖黑色三角形就能形成这样的形状了,关于覆盖的问题可以使用标签的位置或z-index来改变。
html代码
- <div class="box b1"></div>
- <div class="box b2"></div>
css代码
- .box{
- position: absolute;
- left: 0;
- top: 0;
- width: 0;
- height:0;
- border: 6px solid transparent;
- }
- .b1{
- border-bottom-color:#000 ;
- }
- .b2{
- border-bottom-color:#fff ;
- }
感谢:
感谢网友 qq_35104381 提出一个非常有建设性的问题:同样位置、大小的元素,为什么白色元素覆盖黑色元素就形成这样的缺口了?按理说应该是白色全覆盖黑色才对!
我觉得这个问题确实很有趣,目前本人认为这是H5聪明的地方,应该是浏览器渲染的规则所为!毕竟IE9以下的版本并不支持的。如果大家有更好的解释欢迎留言,相互交流学些!
最新文章
- myEclipse Could not create the view: An unexpected exception was thrown.
- ArcGIS API中FindTask中文搜索无效,服务器编码问题URIEncoding=";utf-8";
- Silverlight4-安装顺序(VS2010)
- 获取Request请求的路径信息
- content = ";IE=edge,chrome=1"; 详解
- bzoj3698
- 开源软件:NoSql数据库 - 图数据库 Cassandra
- sublime下配置C/C++运行环境
- Mesh内存分配器的mmap小技巧
- Python基于Python实现批量上传文件或目录到不同的Linux服务器
- GA-H61M-DS2 BIOS SETTING
- 1 认识Jquery
- spring boot(十一):Spring boot中mongodb的使用
- insert into table 插入多条数据
- Codeforces Round #541 (Div. 2) G dp + 思维 + 单调栈 or 链表 (连锁反应)
- 并发编程之 wait notify 方法剖析
- 计算机名、主机名、用户账户名与NetBIOS名有什么区别
- RocketMQ生产者消息篇
- Python + selenium + unittest装饰器 @classmethod
- 构建高可用Linux服务器一
热门文章
- jQuery 获取元素当前位置offset()与position()
- [原创]php任务调度器 hellogerard/jobby
- Collections.singletonList方法的使用
- Java实现简单井字棋
- 思维题--code forces round# 551 div.2
- (转)搞个这样的APP要多久?心酸啊。
- Android多媒体技术之视频播放
- ES6 rest参数和扩展运算符
- GitBook入门(用github做出第一本书)——超详细配图说明
- MapReduce原理——分而治之