삼각형 화살표 CSS 그리기

삼각형

.sanjiaoxing {
총수 : 상대;
상단 : 3px의;
디스플레이 : 인라인 블록;
여백 왼쪽 : 8px;
폭 : 0;
키 : 0;
국경 폭 : 5px; //宽度
국경 스타일 : 고체;
국경 색상 : #BBBBBB 투명 투명 투명; //方向
}

 


箭头
.arrTop {
총수 : 절대;
}
.arrTop : 이전 .arrTop {후
총수 : 절대;
내용 : '';
국경 정상 : 8px 투명이 점선;
국경 왼쪽 : 8px 투명 점선;
국경 오른쪽 : 8px 투명이 점선;
국경 바닥 : 8px 고체 #fff;
}
.arrTop {전의
보더 바닥 : 8px RGBA (200, 200, 200, 1) 고체;
}
.arrTop : 후 {
상단 : 1 x 1 픽셀; / *覆盖并错开1 픽셀 * /
테두리 바닥 : 8px 고체 #fff;
}

 

 

.arrBottom {
총수 : 절대;
}
.arrBottom : 이전 .arrBottom {후
총수 : 절대;
내용 : '';
국경 바닥 : 8px 투명이 점선;
국경 왼쪽 : 8px 투명 점선;
국경 오른쪽 : 8px 투명이 점선;
국경 정상 : 고체 #fff 8px;
}
.arrBottom : 전 {
경계 위쪽 : 8px RGBA (200, 200, 200, 1) 고체;
}
.arrBottom : {후
상단 : -1px; / *覆盖并错开1 픽셀의 * /
국경 정상 : 8px 고체 #fff;
}

추천

출처www.cnblogs.com/mrt-yyy/p/11517690.html