码迷,mamicode.com
首页 > Web开发 > 详细

CSS--箭头

时间:2016-03-08 02:13:24      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

原理:

利用边框颜色覆盖(块级标签内联)的效果,取部分图案:如果把一侧的border去掉,还能形成半角。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .arrow{
            display: inline-block;
            border-top: 10px solid black;
            border-right: 10px solid red;
            border-bottom: 10px solid pink;
            border-left: 10px solid blue;
            /*想要哪边箭头,直接把另外三边的颜色改成透明:transparent.*/
        }
    </style>
</head>
<body>
    <div class="arrow"></div>
</body>
</html>

效果:?

技术分享技术分享技术分享技术分享技术分享

半角:

1
2
3
4
5
6
7
8
.arrow{
    display: inline-block;
    border-top: 10px solid black;
    /*border-right: 10px solid transparent;*/
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    /*想要哪边箭头,直接把另外三边的颜色改成透明:transparent.*/
}

半角效果?:

技术分享





CSS--箭头

标签:

原文地址:http://www.cnblogs.com/daliangtou/p/5252524.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!