昨天做了百度2015年前端研发笔试卷,总体感受是比较看重html和css功底,对JavaScript的考察反而更少一些,貌似阿里也是比较看重css这一块。其中有一道用css实现的布局问题,是在一个大矩形旁边绘制一个三角形,牵涉到css3绘制三角形和定位问题,非常经典的css3酷炫用法,搜了很多资料均是只告诉你用代码怎么实现,却没有解释三角形是怎么形成的,今天早上看到了一篇原理,再加上一些自己的理解,整理出来分享给大家。
题目是这样的
请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
<div id=”demo”></div>
<div id=”demo”></div>
图a
对于左边这个矩形框,就是一个border就可以搞定的,但是右边凸出来的三角形怎么弄呢?关键人家还是非闭合的 ?要解决这个问题,先来学习一下怎么用css3的border实现画三角形。
1,普通元素加边框,看例子:
<pre name="code" class="html"><style>
#demoContent{
width: 100px;
height: 100px;
border:40px solid lightblue;
}
</style>
<div id="demoContent"></div>
在chrome中的效果, 图b 。就是元素周围加了一圈边框对吧。那如果我们把元素大小设置为0呢?
代码是这样的:
<style>
#demoContent{
width: 0px;
height: 0px;
border:40px solid lightblue;
}
</style>
<div id="demoContent"></div>