题目点评

三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单

答题要点

1.采用的是均分原理

盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部

2.代码的实现

第一步 保证元素是块级元素

第二步 设置元素的边框

第三步 不需要显示的边框使用透明色

示例代码

  1. .square{
  2. width:0;
  3. height:0;
  4. margin:0 auto;
  5. border:6px solid transparent;
  6. border-top: 6px solid red;
  7. }

效果图

加分项

描述自己的心得:在开发中我们也经常设计一个带缺口的三角形效果,如下图所示。

上图效果的做法是这样的:

1.、两个三角形(底边框)的位置、大小要一致

2、里面的三角形的底边框颜色为黑色(也可以为其它颜色),外面三角形边框颜色为白色的背景

3、白色三角形要覆盖黑色三角形就能形成这样的形状了,关于覆盖的问题可以使用标签的位置或z-index来改变。

html代码

  1. <div class="box b1"></div>
  2. <div class="box b2"></div>

css代码

  1. .box{
  2. position: absolute;
  3. left: 0;
  4. top: 0;
  5. width: 0;
  6. height:0;
  7. border: 6px solid transparent;
  8. }
  9. .b1{
  10. border-bottom-color:#000 ;
  11. }
  12. .b2{
  13. border-bottom-color:#fff ;
  14. }

感谢:

感谢网友 qq_35104381 提出一个非常有建设性的问题:同样位置、大小的元素,为什么白色元素覆盖黑色元素就形成这样的缺口了?按理说应该是白色全覆盖黑色才对!

我觉得这个问题确实很有趣,目前本人认为这是H5聪明的地方,应该是浏览器渲染的规则所为!毕竟IE9以下的版本并不支持的。如果大家有更好的解释欢迎留言,相互交流学些!

Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?的更多相关文章

  1. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  2. Web前端面试指导(十):元素定位有哪些?

    本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...

  3. Web前端面试指导(十九):CSS样式-如何清除元素浮动?

    题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...

  4. Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  5. Web前端面试指导(十六):为什么要初始化CSS样式?

    题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼 ...

  6. Web前端面试指导(十五):CSS样式-display有哪些作用?

    题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block( ...

  7. Web前端面试指导(十二):::before 和:before有什么区别?

    题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不 ...

  8. 用纯CSS创建一个三角形

    原理:把上.左.右三条边隐藏掉(颜色设为 transparent) #demo { width:; height:; border-width: 20px; border-style: solid; ...

  9. Web前端面试指导(八):iframe有那些缺点

    本题的特点 这道题目的特点就是不按照正常的套路来提问,一般都是问优点,这里比较反常问iframe的缺点,很多同学肯定很不习惯这种问答,因为平时只关注有点,这么一问就懵逼了! 本题解答的思路及要点 ① ...

随机推荐

  1. SHELL脚本扩展

    使用SED命令 sed称为流编辑器,命令格式如下: sed option script file -e script #指定多个命令 -f script_file #指定命令文件 -n #不需要为每个 ...

  2. maven项目在eclipse启动报错:java.lang.ClassNotFoundException

    问题: 用eclipse创建maven项目的时候,pom.xml中相关的依赖jar已经导入进去,还会报java.lang.ClassNotFoundException的错误,提示找不到相关的jar包, ...

  3. 【Alpha】Phylab 测试报告

    PhyLab Alpha 测试报告 测试中发现的bug Bug 可能原因 实验区域发布评论,如果需要验证码,无法填写 评论频率过快,实验区未接入验证码系统 忘记密码,但无邮件发送 忘记密码部分暂未修复 ...

  4. MongoDB ver 4 几个常用命令

    1. 为某个数据库创建用户: use db_test1; db.createUser({ user:"test_user_1", pwd:"test_user_1_pwd ...

  5. maven工程下testng简单使用

    创建maven工程后,将Repository仓库中maven代码粘贴复制到pom.xml文件中,仓库地址:<!-- https://mvnrepository.com/artifact/org. ...

  6. Mac 10.12安装Homebrew图形化界面管理工具Cakebrew

    下载: (链接: https://pan.baidu.com/s/1mivJ9H2 密码: f8dr)

  7. (转)搞个这样的APP要多久?心酸啊。

    这是一个“如有雷同,纯属巧合”的故事,外加一些废话,大家请勿对号入座.开始了…… 我有些尴尬地拿着水杯,正对面坐着来访的王总,他是在别处打拼的人,这几年据说收获颇丰,见移动互联网如火如荼,自然也想着要 ...

  8. 关于docker的理解随记

    1.容器其实不是什么新技术,说白了就是namespace对资源进行隔离,再加UFS实现分层镜像,以及cgroup实现资源限制.这些技术,都是linux中已有的技术,而且有些技术很早之前就有了. 2.上 ...

  9. Perl入门

    Perl 是一门开源的脚本语言,由 Larry Wall 所创造,该语言以实用,快速开发为主要目标,与当前流行的面向对象结构化编程有些格格不入,但这并不妨碍 Perl 被广泛流传和使用,世界范围内围绕 ...

  10. redis的数据类型(二)string类型

      下面讲解value,value包括String.List.Set.Sorted Set.Hash 一.String类型 1.string类型  String是最基本的类型,而且Stirng类型是二 ...