您的位置：首页 > Web前端 > CSS

关于css三角形的制作

2015-07-02 23:00 585 查看
网页中三角形使用的地方很多，比如弹出的消息对话框的小箭头、网站后台的聊天弹框。

制作三角形我们可以有两种方法，一种是通过美工处理，将三角形制作出来，然后通过设置背景图片，如前一篇所提到的sprite图的制作。今天去面试的时候帮面试公司调试意外得到经验，同一行的inline-block元素我们可以通过改变margin的值可以是的两个图片任意连接。下面以正方形为例，一会讲解三角形。

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
div{
height: 150px;
width: 150px;
background: #456789;
margin: 200px;

}
.span1{
float: left;
width: 115px;
height: 115px;
background: #000fff;
text-align: center;
line-height: 115px;
}
.span2{
float: left;
width: 25px;
height: 25px;
background: #fff000;
margin-left: -50px;
margin-top: -25px;
text-align: center;
line-height: 25px;
}

</style>
</head>
<body>
<div>
<span class="span1">11</span><span class="span2">22</span>
</div>
</body>
</html>




这是让小方格放到大方格的上面↑

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
div{
height: 150px;
width: 150px;
background: #456789;
margin: 200px;

}
.span1{
float: left;
width: 115px;
height: 115px;
background: #000fff;
text-align: center;
line-height: 115px;
}
.span2{
float: left;
width: 25px;
height: 25px;
background: #fff000;
margin-left: -140px;
text-align: center;
line-height: 25px;
}

</style>
</head>
<body>
<div>
<span class="span1">11</span><span class="span2">22</span>
</div>
</body>
</html>




小正方形又跑到了大正方形的上面 ↑
这就是利用float属性和margin属性改变位置。

下面讲解如何制作三角形，首先我们知道，一个块元素是由padding、margin、border和设置的宽高决定的。一个块元素的大小也是这么决定的，对于两个inline-block元素，增加一个元素的border、padding、margin值就会使得行高变化，使整个行发生变化。

设置块大小是个25x25，border是个5px；

<pre name="code" class="html"><!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
div{
height: 150px;
width: 150px;
background: #456789;
margin: 200px;

}
.span1{
float: left;
width: 115px;
height: 115px;
background: #000fff;
text-align: center;
line-height: 115px;
}
.span2{
float: left;
width: 25px;
height: 25px;

border-top: 5px solid green;
border-left: 5px solid red;
border-bottom: 5px solid blue;
border-right: 5px solid pink;
}

</style>
</head>
<body>
<div>
<span class="span1">11</span><span class="span2">22</span>
</div>
</body>
</html>






当逐渐增大border宽度

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
div{
height: 150px;
width: 150px;
background: #456789;
margin: 200px;

}
.span1{
float: left;
width: 115px;
height: 115px;
background: #000fff;
text-align: center;
line-height: 115px;
}
.span2{
float: left;
width: 25px;
height: 25px;

border-top: 25px solid green;
border-left: 25px solid red;
border-bottom: 25px solid blue;
border-right: 25px solid pink;
}

</style>
</head>
<body>
<div>
<span class="span1">11</span><span class="span2">22</span>
</div>
</body>
</html>




当设置块的大小为0时，变为四个三角形

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
div{
height: 150px;
width: 150px;
background: #456789;
margin: 200px;

}
.span1{
float: left;
width: 115px;
height: 115px;
background: #000fff;
text-align: center;
line-height: 115px;
}
.span2{
float: left;
width: 0px;
height: 0px;
border-top: 25px solid green;
border-left: 25px solid red;
border-bottom: 25px solid blue;
border-right: 25px solid pink;
}

</style>
</head>
<body>
<div>
<span class="span1">11</span><span class="span2">22</span>
</div>
</body>
</html>




所以当把左右的border的颜色设置为透明的时候，就会产生三角形

<!DOCTYPE>
<html lang="zh-CN">
<head>
<title>网页</title>
<meta http-equiv="Content-Type" content=" charset=utf-8" />
<style>
div{
height: 150px;
width: 150px;
background: #456789;
margin: 200px;

}
.span1{
float: left;
width: 115px;
height: 115px;
background: #000fff;
text-align: center;
line-height: 115px;
}
.span2{
float: left;
width: 0px;
height: 0px;
border-top: 25px solid green;
border-left: 25px solid transparent;
/*border-bottom: 25px solid blue;*/
border-right: 25px solid transparent;
}

</style>
</head>
<body>
<div>
<span class="span1">11</span><span class="span2">22</span>
</div>
</body>
</html>



然后大家自己diy吧。。。。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航