css制作三角(增加了bootstrap中的方法)

想参考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一致

1. border-width: 15px;//大小和box一样
2. }

这几天忽然发现bootstrap上的方法也很有意思，是用伪元素:before和:after制作的，自己也尝试一下吧

. navbar . nav > li > . dropdown-menu: before {

position: absolute;

top: -7px;

left: 9px;

display: inline-block;

border-right: 7px solid transparent;

border-bottom: 7px solid #ccc;

border-left: 7px solid transparent;

border-bottom-color: rgba( 0, 0, 0, 0.2);

content: '';

}

. navbar . nav > li > . dropdown-menu: after {

position: absolute;

top: -6px;

left: 10px;

display: inline-block;

border-right: 6px solid transparent;

border-bottom: 6px solid #ffffff;

border-left: 6px solid transparent;

content: '';

}

当然.dropdown-menu的position也是absolute.这种方法有一个好处，就是不用重新加入div了