利用css制作三角形

lxl211

于 2022-11-12 15:51:24 发布

阅读量124

点赞数

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/lxllxl211/article/details/127821147

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

先建一个盒子

<body>
    <div></div>
</body>

<style>
        div{
            width: 100px;
            height: 100px;
            border: 50px solid  red;
        }
</style>

这样的情况就是建造一个宽高都是100px，背景颜色为透明，外边框为red的正方形。
在这里插入图片描述

然后在div样式中添加border-color:外边框颜色

div{
            width: 100px;
            height: 100px;
            border: 50px solid  red;
            border-color: blue transparent transparent transparent; 
 }

得到了一个等腰梯形
在这里插入图片描述
此时，如果宽高都设置成0

div{
       width: 0px;
       height: 0px;
       border: 50px solid  red;
       border-color: blue transparent transparent transparent; 
}

就会得到一个蓝色的三角
在这里插入图片描述

lxl211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用css制作三角形

这样的情况就是建造一个宽高都是100px，背景颜色为透明，外边框为red的正方形。然后在div样式中添加border-color:外边框颜色。此时，如果宽高都设置成0。就会得到一个蓝色的三角。
复制链接

扫一扫

专栏目录