saber酱的抱枕

Fly me to the moon

10/30
17:17
学习

css制作三角形

做三角形的要点:
1.div宽高必须为0;
2.边框颜色透明是透明,虽然看不到,但是不同于边框none哦;
3.line-height: 0;的设置是为了解决ie6空div有高度的bug;
4.ie6下设为透明的边框将显示为黑色...真是个可爱的小调皮~爆炸吧ie6!!!

好,接下来进入实战。以下皆为代码实现哦~

首先是向上的三角形,设置其底边框的可见样式,其他三条边框为透明。

为什么这样就能出来三角形了呢?我们把四条边框全部设为可见就明白了

我们给div加上宽高再看,才发现原来边框并非是我们所想的四个长条。如果把下面div的宽高归零,四条边框自然就有重合点——变成四个三角形了。

平时我们不知道这个事实,大概是因为我们经常把边框设置为同一种颜色的原因,那样当然就以为四条边就是四条直线拼一起了呢

明白了这个道理,我们可以随意调♂教这四条边了:

 

现在,不管是上下左右还是四个斜角,你还能说你不会吗?

上面的斜三角是用两个三角形拼起来的,因此看起来明显比较大。实际上可以用一个小三角的面积显示的,那就是随意挑选两个相邻的纵向边框和横向边框,将其中一个设为透明,一个设为可见色,另外两条边框设置为none就可以了。两条边框各占据了矩形的一半。

看下面的太极图,你能想到它是用圆角、定位、边框组合出来的吗?进阶地址

小技巧:
1.一般来说,做箭头的话,只要四个边框合起来是个矩形就ok了,所以每条边框的宽高分别为总宽高的一半。
2.像例子中的第一个三角形那样,我们如果不需要其对面(上面)的另一半边框,将那一面的边框宽度设置为0即可,不然的话,虽然看不见,可也是在占用宽高的哦~
3.适当的情况下使用缩写可减少css书写量,如例一的向上三角形,css可以这么写:

border-style: solid;
border-width: 0 50px 50px 50px;
border-color: transparent transparent #E8339B transparent;

最后附上我测试时的demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>纯css制作三角形</title>
</head>
<body>
    <div id="test">
	    <p>首先是向上的三角形,设置其底边框的可见样式,其他三条边框颜色透明。</p>
	    <div id="a1"></div>
	    <p>为什么这样就能出来三角形了呢?我们把四条边框全部设为可见就明白了</p>
	    <div id="a2"></div>
	    <p>我们给div加上宽高再看,才发现原来边框并非是我们所想的四个长条,如果把下面div的宽高归零,四条边框自然就有重合点——变成四个三角形了。</p>
	    <div id="a3"></div>
	    <p>明白了这个道理,我们可以随意调教这四条边了:</p>
	    <div id="a4"></div>
	    <div id="a5"></div>
	    <p>不管是上下左右还是四个斜角,你还能说你不会吗?</p>
	    <p>进阶:上面的斜三角是用两个三角形拼起来的,因此看起来明显比较大。实际上可以用一个小三角的面积显示的,那就是随意挑选一个纵向边框和一个横向边框,将其中一个设为透明,一个设为可见色,另外两条边框设置为none就可以了。</p>
	    <div id="a6"></div>
	    <p>看下面的太极图,你能想到它是用圆角、定位、边框组合出来的吗?<a href="http://spion.blog.163</p>.com/blog/static/187244272201272791123671/" target="_blank">进阶地址</a>
	    <div id="a7"></div>
    </div>
    <style type="text/css">
    	body{text-align: center; font-family: '微软雅黑';}
		#test div{width: 0;height: 0;line-height: 0;margin: 20px auto 0;}
		#a1{border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent #E8339B transparent;}
		#a2{border-bottom: 50px solid #E8339B;border-left: 50px solid #ACCE21;border-right: 50px solid #00A2EA;border-top: 50px solid #FF8200;}
		#a3{width: 100px !important;height: 100px !important;border-bottom: 50px solid #E8339B;border-left: 50px solid #ACCE21;border-right: 50px solid #00A2EA;border-top: 50px solid #FF8200;}
		#a4{border-bottom: 50px solid #E8339B;border-left: 50px solid #E8339B;border-right: 50px solid #00A2EA;border-top: 50px solid #00A2EA;}
		#a5{border-bottom: 50px solid #E8339B;border-left: 50px solid transparent;border-right: 50px solid #E8339B;border-top: 50px solid transparent;}
		#a6{border-style: solid;border-width: 50px; border-color: transparent #E8339B;border-bottom: none;border-left: none;}
		#a7 {     width: 96px !important;     height: 48px !important;     background: #fff;     border-color: #E8339B;     border-style: solid;
 border-width: 2px 2px 50px 2px;     border-radius: 100%;     position: relative; }  
 #a7:before {     content: "";     position: absolute;     top: 50%;     left: 0;     background: #fff;
 border: 18px solid #E8339B;     border-radius: 100%;     width: 12px;     height: 12px; }   
#a7:after {     content: "";     position: absolute;     top: 50%;     left: 50%;     background: #E8339B;
border: 18px solid #fff;     border-radius:100%;     width: 12px;     height: 12px; }
    </style>
</body>
</html>

css制作三角形