css空心三角形_CSS3 用border写 空心三角箭头 (两种写法)

之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

第一种写法 利用常见的 after伪元素

.arrow {

width: 20px;

height: 4px;

margin: 0 auto 7px;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

border-bottom: 4px solid #343c99;

transform: rotate(45deg);

transform-origin: left;

}

.arrow:after {

content: '';

display: block;

width: 100%;

height: 100%;

border-left: 4px solid transparent;

border-right: 4px solid transparent;

border-top: 4px solid #343c99;

position: absolute;

right: -10px;

top: -14px;

transform: rotate(90deg);

transform-origin: bottom;

}

第二种写法相对于比较简单

/*简单*/

.wb_arrow{

border-right: 2px solid #343c99;

border-top: 2px solid #343c99;

height: 10px;

width: 10px;

margin:50px auto 0;

transform: rotate(deg);

-webkit-transform: rotate(0deg);

/*不加这两个属性三角会比上一个略丑, 大家可以试一下*/

border-left: 2px solid transparent;

border-bottom: 2px solid transparent;

}