第一种情况:带边框的小三角
乍一看,很简单,做小三角,首先想到的是利用border的transparent特性,可以制作出小三角的效果。但是注意,这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西,让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签,还想实现这个效果。首先想到的就是用元素的伪类来实现。原理就是这样,废话不多说,上代码:
.box{
float:left;
position:relative;
width:100px;
height:100px;
border:1px solid red;
margin-left:50px;
margin-right:50px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
font-size:14px;
padding:10px;
}
.box:before,
.box:after{
position:absolute;
content:" ";
width:0;
height:0;
top:100%;
border:10px solid transparent;
left:50%;
margin-left:-5px;
pointer-events:none;
}
.box:before{
border-top-width:11px;
border-top-color:red;
margin-left:-11px;
}
.box:after{
border-width:9px;
border-top-width:10px;
border-top-color:#fff;
margin-left:-10px;}
第二种情况,有时设计师给出的设计图,小三角带边框,还带阴影,苦逼了吧。首先想到的是给小三角加一个box-shadow属性,问题就可能很轻松的解决了,可是问题往往没有那么简单。box-shadow只加在border外边缘,跟我们想要的真的是差太多。仲么办呢?跟上面的原理差不太多,只是要用到css3中transform,把元素rotate(45deg),变成两个菱形,然后对底下的元素加box-shadow,然后用后面的元素覆盖底下的元素。代码如下:
.box2{
float:left;
position:relative;
width:100px;
height:100px;
border:1px solid red;
margin-left:50px;
margin-right:50px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
font-size:14px;
padding:10px;
box-shadow:0 0 2px rgba(0,0,0,.5)
}
.box2:before,
.box2:after{
position:absolute;
content:'';
width:14px;
height:14px;
bottom:-8px;
left:50%;
margin-left:-7px;
overflow:hidden;
pointer-events:none;
-webkit-transform:rotate(45deg);
-mz-transform:rotate(45deg);
transform:rotate(45deg);
}
.box2:before{
background:red;
box-shadow:1px 1px 2px rgba(0,0,0,.5)
}
.box2:after{
bottom:-7px;background:#fff;
}