给一个div的一边做出一个凸起的小三角形

最新推荐文章于 2023-09-05 14:30:29 发布

csdn_haow

最新推荐文章于 2023-09-05 14:30:29 发布

阅读量5.8k

点赞数 2

分类专栏：前端技能总结文章标签：三角形 css

前端技能总结专栏收录该内容

30 篇文章 3 订阅

订阅专栏

HTML：

<div class="one">
    <div class="one0"></div>
</div>

CSS：

.one{
    width: 100px;
    height: 100px;
    background-color: #00B0E7;
    /*相对位置*/
    position: relative;
}
.one0{
    width: 0;
    height: 0;
    border: 10px solid white;
    border-top: none;
    border-right-color: transparent;
    border-left-color: transparent;
    /*绝对位置*/
    position: absolute;
    /*将小三角形向下移90个像素*/
    top: 90px;
    /*将小三角形向右移10个像素*/
    left: 10px;

}

效果