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

css画三角形

2016-08-13 19:46 267 查看
效果图：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>空心三角形</title>
<style>
.triangle{
width:0;
height:0;
border-top:0solidtransparent;
border-bottom:10pxsoliddarkorange;
border-left:10pxsolidtransparent;
border-right:10pxsolidtransparent;
position:relative;
top:1px;
left:20px;
}
.triangleInner{
width:0;
height:0;
border-top:0solidtransparent;
border-bottom:8pxsolidwhite;
border-left:8pxsolidtransparent;
border-right:8pxsolidtransparent;
position:absolute;
left:-8px;
top:2px;
}
.block{
width:200px;
height:100px;
border:1pxsoliddarkorange;
text-align:center;
line-height:100px;
border-radius:10px;
}
</style>
</head>
<body>
<divclass="triangle">
<divclass="triangleInner"></div>
</div>
<divclass="block">helloworld</div>
</body>
</html>


ViewCode
效果图wei：




　　

                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航