2021-06-18 css实现三角形

旧雨化碧

于 2021-06-18 15:50:42 发布

阅读量95

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_44428467/article/details/118027732

版权

前端专栏收录该内容

13 篇文章

订阅专栏

方法1：

.create{
    width: 0;
    height: 0;
    border:10px solid transparent;
    border-right-color: tomato;
}

方法2：使用伪类

.s2::after{
    content: "";
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid red;
    border-right: 2px solid red;
    transform: rotate(45deg);
}

原理。构造出一个长方形，并对想要的边框加上颜色，并对其进行旋转成想要的三角朝向。
方法3：使用渐变

.s3{
    width: 10px;
    height: 10px;
    background:linear-gradient(to bottom right, #fff 0%, #fff 49.9%, rgba(148,88,255,1) 50%,rgba(185,88,255,1) 100%);
}