百度前端笔试题 css3画三角形

    昨天做了百度2015年前端研发笔试卷，总体感受是比较看重html和css功底，对JavaScript的考察反而更少一些，貌似阿里也是比较看重css这一块。其中有一道用css实现的布局问题，是在一个大矩形旁边绘制一个三角形，牵涉到css3绘制三角形和定位问题，非常经典的css3酷炫用法，搜了很多资料均是只告诉你用代码怎么实现，却没有解释三角形是怎么形成的，今天早上看到了一篇原理，再加上一些自己的理解，整理出来分享给大家。

     题目是这样的

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：
<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>