web前端入门到实战:css简单实现带箭头的边框

实现一个普通边框

web前端入门到实战:css简单实现带箭头的边框_第1张图片
    
    
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

实现由四个三角形组成的正方形

web前端入门到实战:css简单实现带箭头的边框_第2张图片
    
    

三角形

web前端入门到实战:css简单实现带箭头的边框_第3张图片
    
    

将左右下边颜色设置为透明 transparent,得到向下的箭头

将三角形放入边框中

web前端入门到实战:css简单实现带箭头的边框_第4张图片
    
    
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

将三角形设置为绝对定位,利用margin-left和left 定位到元素中间,bottom设置-8px,靠近边框底部

遮住多余三角形

    
    
web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,PDF)

将边框颜色换成好看的蓝色,将before和after伪元素都设置为绝对定位,定位到边框底部剧中,将after伪元素设置成白色,底部偏移量大于before 1px,遮住三角形底部的颜色。这样一个好看的箭头边框就实现了

你可能感兴趣的:(web前端入门到实战:css简单实现带箭头的边框)