Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么? |
您所在的位置:网站首页 › 用css创建一个三角形的原理 › Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么? |
题目点评
三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点1.采用的是均分原理 盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部 2.代码的实现 第一步 保证元素是块级元素 第二步 设置元素的边框 第三步 不需要显示的边框使用透明色 示例代码 [css] view plain copy .square{ width:0; height:0; margin:0 auto; border:6px solid transparent; border-top: 6px solid red; } 效果图
加分项 描述自己的心得:在开发中我们也经常设计一个带缺口的三角形效果,如下图所示。 上图效果的做法是这样的: 1.、两个三角形(底边框)的位置、大小要一致 2、里面的三角形的底边框颜色为黑色(也可以为其它颜色),外面三角形边框颜色为白色的背景 3、白色三角形要覆盖黑色三角形就能形成这样的形状了,关于覆盖的问题可以使用标签的位置或z-index来改变。 html代码 [html] view plain copycss代码 [css] view plain copy .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以下的版本并不支持的。如果大家有更好的解释欢迎留言,相互交流学些! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |