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

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

     题目是这样的

请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：

  图a

对于左边这个矩形框，就是一个border就可以搞定的，但是右边凸出来的三角形怎么弄呢？关键人家还是非闭合的 ？要解决这个问题，先来学习一下怎么用css3的border实现画三角形。

    1，普通元素加边框，看例子：

     

 
   
 
   
 在chrome中的效果，  
   图b  。就是元素周围加了一圈边框对吧。那如果我们把元素大小设置为0呢？ 
  

代码是这样的：

图c。 这是在chrome中的效果，注意此时只有边框了哦，我们设置边框宽度为40px，此时是一个80*80的矩形。我们知道可以分别为边框设置不同的颜色样式，所以当元素大小为0时，我们分别设置一下边框四条边，看看效果；代码和效果见下图：

#demoContent{
  /* width: 100px;
   height: 100px;*/
   margin-right: 20px;
   width: 0px;
   height: 0px;
    border-top: 40px solid red;
   border-right: 40px solid lightblue;
    border-bottom: 40px solid lightgreen;
    border-left: 40px solid purple;
}
 
   
 
  

图d。

咦？怎么出来四个三角形啦？为了看看三角形是如何冒出来的，我们还是先看一下当元素有大小的时候，四边分别是设置边框的效果。代码和效果见下

#demoContent{
   width: 100px;
   height: 100px;
   margin-right: 20px;
  /* width: 0px;
   height: 0px;*/
   /*border:40px solid lightblue;*/
    border-top: 40px solid red;
   border-right: 40px solid lightblue;
    border-bottom: 40px solid lightgreen;
    border-left: 40px solid purple;
}
 
   
 
  

  图e。     图f。

咦，每个边框都变成了梯形？梯形是怎么出现的呢？ 请注意上图右边长方形的4个角，以 左上角 为例，它到底是属于左边框还是上边框呢？ 左上角 ，既属于 左边框 ，又属于 上边框 ，角落的归属成了一个问题，浏览器为了不让边框打架，就让二位各分一半吧。 于是乎左上角就被一分为二，变成了两个三角形，三角形靠近哪个边框，就显示那个边框的颜色。中间白色是元素，想像一下，当元素大小为0的时候，也即去掉白色部分，四个角合到一起是不是就变成了图d的样子，也就是四个三角形？

   到这里我们已经知道三角形怎么形成了，但是是四个三角形，那么我如何只得到一个三角形呢？我们知道border-color属性值可以设置为transparent，即透明，也就是没有颜色。我们想要得到一个三角形，就可以把另外三变设置为transparent。下面看一下左三角和上三角的例子，图和代码见下:

#demoContent{
  /* width: 100px;
   height: 100px;*/
   margin-right: 20px;
   width: 0px;
   height: 0px;
   border:40px solid transparent;
    border-left: 40px solid purple;
}
 
   
 
  

  图g和图h。 要得到上三角只需要把border-left换成border-top就好啦。

到此为止，我们知道了如何获得一个三角形，下面进入正题，看看如何得到百度的要求。

对于左边的 矩形框，首先我们要有一个100*100的元素，然后加上黑色边框，为了得到后面三角形，我们从上面例子可以看出，三角形是填充的，所以这里需要两个三角形，小的三角形为透明遮盖一部分大三角形，剩下的边就是三角形边了。后面那两个元素，我们用伪类实现，注意百度的三角形还有位置关系，所以我们将父元素设置为相对定位，伪元素设置为决对定位。看代码：

#baidu1{
	width: 100px;
	height: 100px;
	border:2px solid #000;   //左边的矩形框
	position: relative;
	margin-right: 10px;
}
#baidu1:before,#baidu1:after{
	content: ' ';
     position: absolute;
     left: 100%;
     border: solid transparent;    //伪元素设置为透明框
}
#baidu1:after{
	width: 0px;
	height: 0px;
	top:20px;
	border-width: 10px;
	border-left: 10px solid  #fff;    //after元素，左三角形，白色，小三角形，会遮盖before元素
}
#baidu1:before{
	width: 0px;
	height: 0px;
	top:18px;
	border-width: 12px;
	border-left: 12px solid #000;  //黑色大左三角形，被白色覆盖一部分，正好剩下2px的边
}

OK了看图 。利用三角形还可以绘制很多有意思的图形，更多的请看下面这两个网址。 点击打开链接       点击打开链接  。