欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

css 三角形

shiping1 的头像

纯CSS绘制三角形(各种角度)

作者: 字体:[增加 减小] 类型:转载
CSS三角形绘制方法,学会了这个,其它的也就简单。
 
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。

今天给大家带来 CSS 三角形绘制方法

复制代码代码如下:

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

复制代码代码如下:

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

复制代码代码如下:

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

复制代码代码如下:

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

复制代码代码如下:

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

复制代码代码如下:

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

复制代码代码如下:

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

复制代码代码如下:

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

来自 http://www.jb51.net/article/42513.htm



纯CSS写三角形-border法[基础篇]

注意:所有知识点将不考虑IE6 ( ̄▽ ̄")

 

 

在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者的认可。但涉及到后期优化维护的话,就需要不断的修改图片,在图形编辑器和代码编辑器之间来回切换,这无疑是加大了工作量。所以,如果单纯利用CSS来写的话,不但可以减少网站零碎图片的数量、减少了加载图片的时间,而且在修改时不用再重新切图,减少工作量。

CSS3出现以后,“方形旋转45度”制作三角形的方法固然炫酷,在兼容性上却差了点意思。所以这里要讲的是利用CSS2来写三角形,兼容所有浏览器(IE6)。

当然,任何方法都不会是十全十美的,在用CSS制作三角形时,必须存在一个甚至多个没有内容的空标签,例如<span></span>或<div></div>,如果有代码洁癖的人,请慎用~

主要用到的CSS属性是border(还不了解border用法的孩子们可以去w3c上学习下~)。

 

首先,写一个宽高都为0的空div样式:

1
2
3
4
5
6
7
.border_zero{
    width:0;
    height:0;
    border-width:30px;
    border-style:solid;
    border-color:#c03 #fc0 #69c #6c6;/* 红 黄 蓝 绿 */
}

效果如图:

我们要利用的正是border的这种边彼此叠加的性质来制作三角形,只要让其他三条边隐藏起来就可达到效果。

通过上面的原理,我们来制作一个指向下的三角形:

1
2
3
4
5
6
7
.triangle_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#c03 transparent transparent ;/* 红 透明 透明 */
}

效果如图:

border-color:#c03 transparent transparent ;是将需要隐藏的边的颜色设置成透明;

border-width:30px 30px 0; 是将三角形对边的宽度设置为0(这里对边是border-bottom)。

这么做的原因是减小三角形有效作用区域。如果只改变颜色透明,而不改宽度会怎么样呢?

我们来给这个样式添加个阴影看下(这里建议用FF和CHROME浏览器查看效果)。

1
2
3
4
5
6
7
8
.triangle_down_big{
    width:0;
    height:0;
    border-width:30px;
    border-style:solid;
    border-color:#c03 transparent transparent ;/* 红 透明 透明 */
    box-shadow:0 0 2px rgba(0,0,0,1);/* 添加黑色阴影,查看三角形有效作用区域 */
}

效果如图:

改变对边宽度为0后,

1
2
3
4
5
6
7
8
.triangle_down_small{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#c03 transparent transparent ;/* 红 透明 透明 */
    box-shadow:0 0 2px rgba(0,0,0,1);/* 添加黑色阴影,查看三角形有效作用区域 */
}

效果如图:

两种效果对比之下,虽然三角形看起来大小相同,但实际有效作用区域是不相同的。了解这一点,是为以后来写js的tip弹出层效果时做准备。

通过上面的内容,我们就可以开始写文章最开头引用效果图的样式了。

HTML:

1
2
3
4
5
6
<div class=" test_zone">
    <div class="test_triangle">
        <a href="#">三角形</a>
        <div class="popup"><span></span>纯CSS写三角形</div>
    </div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.test_triangle{
    width:200px;
    margin:0 auto 20px;
    position:relative;
}
a{
    color:#3FB58E;
    font-weight:bold;
    text-decoration:none;
}
.popup{
    width:100px;
    background:#3FB58E;
    padding:10px 20px;
    color:#fff
    border-radius:4px;
    position:absolute;
    top:30px;
    left:30px;
}
.popup span{
    display:block;
    width:0;
    height:0;
    border-width:0 10px 10px;
    border-style:solid;
    border-color:transparent transparent #3FB58E;
    position:absolute;
    top:-10px;
    left:50%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}

以上主要是border法写三角形的基础内容,后续会再整理一些“晋级”类的总结~_(:з)∠)_

 

题外话:第一次写知识贴,目的是把做项目时涉及到的知识点整理出来,以备以后查阅,同时也希望能和更多人有所交流~不足之处望见谅~~~有什么错误的地方也希望可以被指出来,谢谢=V=

来自 http://crossjae.diandian.com/css/border01

普通分类: