想参考google+做个网站,如下图,有一个小提示的三角,其他很多地方也会用的,觉得这个东西还是很实用的
一个黑黑的三角形实现,其css如下:
#box{
display:block;
border-color: transparent black transparent transparent;//上右下左的顺序,上下左边都是透明,只有右边有颜色,所以是指向左边的三角箭头
border-style: dashed solid dashed dashed;//只有右边是solid的实线,其他为虚线
border-width: 15px;//这决定了三角形的大小。定位的时候一定要注意,其实这是一个30x30的正方形,只不过其他三个角都是透明的,吼吼
}
下面实现一个空心的黑色边框三角形:
html:
<div id="box"><s></s></div>//box里面包裹着一个<s></s>,用s遮住三角形box的内部,只留一个边框就可以拉。
css:
s{
position: absolute;//固定s的位置,在box内部
top: -15px;//根据大小调整位置
left: -14px;
display: block;
border-color: transparent white transparent transparent;//white就是挡住box内部的颜色,可以更改,但顺序一定要和box一致
border-style: dashed solid dashed dashed;//和border-color一致
- border-width: 15px;//大小和box一样
- }