CSS三角形箭頭代碼介紹

大家知道CSS三角形箭頭代碼嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

CSS代碼

復制代碼

代碼如下:

/* create an arrow that points up */

div.arrow-up {

width: 0;

height: 0;

border-left: 5px solid transparent; /* left arrow slant */

border-right: 5px solid transparent; /* right arrow slant */

border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */

font-size: 0;

line-height: 0;

}

/* create an arrow that points down */

div.arrow-down {

width: 0;

height: 0;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

border-top: 5px solid #2f2f2f;

font-size: 0;

line-height: 0;

}

/* create an arrow that points left */

div.arrow-left {

width: 0;

height: 0;

border-bottom: 5px solid transparent; /* left arrow slant */

border-top: 5px solid transparent; /* right arrow slant */

border-right: 5px solid #2f2f2f; /* bottom, add background color here */

font-size: 0;

line-height: 0;

}

/* create an arrow that points right */

div.arrow-right {

width: 0;

height: 0;

border-bottom: 5px solid transparent; /* left arrow slant */

border-top: 5px solid transparent; /* right arrow slant */

border-left: 5px solid #2f2f2f; /* bottom, add background color here */

font-size: 0;

line-height: 0;

}

相信大家已經學會CSS三角形箭頭代碼了吧!感謝大家對我們網站的支持!

相關推薦：

divcssVB中Byval和byref的區別介紹