WesternRanger/x.md

## x.md

      
    Raw
  

              x.md
            
          
    #带三角边的方框
今天做百度的笔试题，被虐的不轻，自己水平太渣，就要承认，所以要安下心来好好学习。
百度2015届校园招聘山东专场-web前端研发工程师笔试题第二题我就不会。以前不是没做过，只不过题目换了我就蒙了。
###题目就给了个这个dom元素
<div id="demo"></div>

###让写出这个效果。


写过那个三角形状，但是是用的两个div叠在一起的，这个题目要求貌似是只有这一个div其他的所有都用css实现，所以我脆弱的小心脏顿时就受不了了。简简单单布局了个方框就交卷子了。
回来以后我就打开电脑想好好构思一番，继续写写，我果然不适合考试，自己本来可以写，到了考场上就是各种问题。
如果不让加dom元素的话，就用css的：after属性和：before属性就可以了。这就相当于加了两个div了。不多说了。直接上代码吧：
###css的写法：
#demo{
width:100px;
height:100px;
border:#000 solid 1px;
background: #fff;
position: relative;
}
#demo:after{
display: block;
width: 1px;
height: 1px;
border-color:transparent transparent transparent #000;
border-width:10px;
border-style: solid;
content: "";
position: absolute;
top:20px;
right:-21px;
}
#demo:before{
display: block;
width: 1px;
height: 1px;
border-color:transparent transparent transparent #fff;
border-width:10px;
border-style: solid;
content: "";
position: absolute;
top:20px;
right:-20px;
z-index:1;
}
没啥难点，也不用注释了。真醉了。不过我也过不了百度笔试，因为脚本对我来说就是一大软肋，学的太渣了，稍微上点难度的我就写不出来。还需加强。

  
## x.png

      
    Raw
  

              x.png