风吟资源网 - 免费提供正版软件、活动线报、优质教程以及其他网络资源,欢迎大家踊跃投稿

css边框与小三角

风吟资源网 学习笔记

CSS边框的组装类似门框的45°一样,而不是想象中的垂直门框。当元素为0x0大小的时候,边框看上去就是4个小三角组合在一起。

这样的话,我们只需要设置某个边框存在就是一个等腰三角了,别的三角相关的都可以按这个规则去设置。


 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>css实现小三角</title>
    <link rel="stylesheet" href="">
    <style>
        div{
            margin-top:40px;
            float:left;
            margin-left:40px;
        }
        .d1{
            width:0px;
            height:0px;
            border-top:55px solid #AACCDD;
            border-bottom:55px solid #CCDDAA;
            border-left:55px solid #CCAADD;
            border-right:55px solid #FFAADD;
        }
        .d2{
            width:10px;
            height:10px;
            border-top:50px solid #AACCDD;
            border-bottom:50px solid #CCDDAA;
            border-left:50px solid #CCAADD;
            border-right:50px solid #FFAADD;
        }        
        .d3{
            width:25px;
            height:25px;
            border-top:40px solid #AACCDD;
            border-bottom:40px solid #CCDDAA;
            border-left:40px solid #CCAADD;
            border-right:40px solid #FFAADD;
        }
        .d4{
            width:40px;
            height:40px;
            border-top:35px solid #AACCDD;
            border-bottom:35px solid #CCDDAA;
            border-left:35px solid #CCAADD;
            border-right:35px solid #FFAADD;
        }
        .d5{
            width:60px;
            height:60px;
            border-top:25px solid #AACCDD;
            border-bottom:25px solid #CCDDAA;
            border-left:25px solid #CCAADD;
            border-right:25px solid #FFAADD;
        }
        .d6{
            width:100px;
            height:100px;
            border-top:5px solid #AACCDD;
            border-bottom:5px solid #CCDDAA;
            border-left:5px solid #CCAADD;
            border-right:5px solid #FFAADD;
        }
        .d7{
            width:30px;
            height:30px;
            border-top:35px solid #AACCDD;
            border-bottom:35px solid #CCDDAA;
            border-left:35px solid #CCAADD;
        }
    </style>
</head>
<body>
    <div class='d1'></div>
    <div class='d2'></div>
    <div class='d3'></div>
    <div class='d4'></div>
    <div class='d5'></div>
    <div class='d6'></div>
    <div class='d7'></div>
</body>
</html>

 

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权请邮件与我们处理。敬请谅解!

我要评论0条评论
禁止发布淫秽、反动、广告评论、乱填写QQ,发现永封IP!
  • 全部评论(0
    还没有评论,快来抢沙发吧!