关注互联网应用及运维技术的个人博客

无需图片使用CSS实现三角效果

原理

我们先来看一个例子:

<style>
        .case {
            width: 0;
            height: 0;
            border-top: 50px solid pink;
            border-bottom: 50px solid red;
            border-right: 50px solid blue;
            border-left: 50px solid green;
        }
</style>
<body>
    <div class='case'></div>
</body>

我们创建了一个没有大小的盒子,并给他指定了四个不同颜色的边框,结果是这样:

如果一个盒子没有大小,宽高是零;再给他四个不同颜色的边框,就会发现,每个边框其实都是一个三角形

由此得知,我们只需要把其他三个边改成透明色,剩下的一边就是三角形了


实例:对话框效果

<style>
        .box {
            margin: 50px auto;
            position: relative;
            width: 200px;
            height: 150px;
            background-color: skyblue;
        }

        .triangle {
            position: absolute;
            width: 0;
            height: 0;
            top: -10px;
            right: 0;
            border: 5px solid transparent;
            border-bottom-color: skyblue;
        }
</style>
<body>
    <div class="box">
        <div class="triangle"></div>
    </div>
</body>



效果图

赞(0)
未经允许不得转载:飞天狒狒 » 无需图片使用CSS实现三角效果

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址