如何用css实现一个三角形

最新推荐文章于 2024-07-25 14:15:14 发布

Run4Freedom

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量147

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/github_38851471/article/details/131464700

版权

方法1：利用border属性

.triangle{
    width: 0;
    height: 0;
    //只有上边框有颜色，其它为透明
    border-color: red transparent transparent transparent; 
    border-style: solid;
    border-width: 10px;
}

方法2：利用CSS3的clip-path属性

.triangle{
    width: 10px;
    height: 10px;
    background: red;
    //将坐标（0，0），（5，10），（10，0）连成一个三角形
    clip-path: polygon(0px 0px, 5px 10px, 10px 0px);
    //旋转180°，变成下三角
    transform: rotate(180deg);
}