码迷,mamicode.com
首页 > Web开发 > 详细

css小三角的制作

时间:2020-04-18 23:09:35      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:pre   边框   src   是什么   bsp   ima   tran   image   宽度   

小引:

思考:给定一个盒子,其宽度高度为0,给定上下左右各10px的边框,设置四个边框颜色不同,会是什么效果。

<style>
        div {
            width: 0;
            height: 0;
            border-left: 10px solid pink;
            border-top: 10px solid red;
            border-right: 10px solid blue;
            border-bottom: 10px solid green;
        }
    </style>
</head>

<body>
    <div></div>

效果:技术图片

 

 因此,当我们想设置三角效果时,可以参考这个,将三个边框的颜色设为透明(transparent),剩下一个三角设置想要的颜色即可

 

css小三角的制作

标签:pre   边框   src   是什么   bsp   ima   tran   image   宽度   

原文地址:https://www.cnblogs.com/echol/p/12728448.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!