请用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>

图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;
}<pre name="code" class="javascript" style="color: rgb(51, 51, 51); font-size: 14px; line-height: 22.4px;"><div id="demoContent"></div>

图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;
}<pre name="code" class="javascript" style="color: rgb(51, 51, 51); font-size: 14px; line-height: 22.4px;"><div id="demoContent"></div>

 图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;
}<pre name="code" class="javascript" style="color: rgb(51, 51, 51); font-size: 14px; line-height: 22.4px;"><div id="demoContent"></div>

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