1,对勾
.container{
width:8px;
height:16px;
border-width:0 2px 2px 0;
border-style:solid;
border-color:red;
transform:rotate(45deg)
}
2,三角形
.container{
height:0;
width:0;
border-width:0 20px 20px 20px;
border-style:solid;
border-color:transparent transparent red;
}
3,图片四周蒙层中间透明
<div class="parent">
<div class="children"</div>
</div>
.parent{
width: 600px;
height: 340px;
position: relative;
background:url(http://upload.ct.youth.cn/2014/1116/1416098866995.jpg)
}
.children{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-style: solid;
border-color: rgba(0, 0, 0, .6);
border-width:70px 200px;
}
效果如下: