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

CSS3实现空心、实心三角指示箭头（利用border的设置实现）

2017-09-27 16:15 645 查看

（一）三角形实现原理

（1）三角形的实现原理是宽高都不设置（即为0），只设置边框，如果四个边框都设置宽度（border-width）、样式（border-style）和颜色（border-color）。
（2）当四个边框的宽度形同的时候
效果图如下



html结构
<div class="box-width-equal">边框的宽度相同</div>

css样式
.box-width-equal{
width: 400px;
height: 400px;
margin: 10px auto;
position: relative;
}
.box-width-equal::before{
content: '';
position: absolute;
border-left: 200px solid orange;
border-top: 200px solid red;
border-bottom: 200px solid orchid;
border-right: 200px solid bisque;
}


（3）当四个边框的宽度不相同的时候
效果图如下



html结构
<div class="box-width-unEqual">边框的不宽度相同</div>

css样式
.box-width-unEqual{
width: 400px;
height: 400px;
margin: 10px auto;
position: relative;
}
.box-width-unEqual::before{
content: '';
position: absolute;
border-left: 250px solid orange;
border-top: 120px solid red;
border-bottom: 280px solid orchid;
border-right: 150px solid bisque;
}


（二）两个三角形重叠时，高度偏移量的实现原理

（1）原理图


（三）实心三角形（视觉上没有边框）

（1）效果图



（2）HTML结构
<body>
<div class="dialog-noBorder">实心三角形（视觉上没有边框）</div>
</body>


（3）CSS样式
* {
margin: 0;
padding: 0; }

.dialog-noBorder {
width: 300px;
height: 150px;
background: orchid;
margin: 0 auto;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
border: 10px solid orchid;
/*此处的边框大小会影响第二个三角形到顶部的偏移量，一般是1.4倍*/ }

.dialog-noBorder::before {
content: '';
position: absolute;
top: 150px;
left: 120px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid orchid; }



（四）空心三角形（视觉上有边框）

（1）效果图

（2）HTML结构
<body>
<div class="dialog-border">空心三角形（视觉上有边框）</div>
</body>

（3）CSS样式
.dialog-border {
width: 300px;
height: 150px;
background: orchid;
margin: 50px auto;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
border: 10px solid red;
/*此处的边框大小会影响第二个三角形到顶部的偏移量，一般是1.4倍*/ }

.dialog-border::before {
content: '';
position: absolute;
top: 150px;
left: 120px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid red; }

.dialog-border::after {
content: '';
position: absolute;
top: 136px;
left: 120px;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid orchid; }

                                            

                                        

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

                    

                    

                        

                         标签： 
                                                css3
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航