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

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

转载最新推荐文章于 2023-09-05 14:30:29 发布 · 6k 阅读

文章标签：

#三角形 #css

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

30 篇文章

订阅专栏

本文详细介绍了如何使用CSS的相对和绝对定位来精确控制网页元素的位置，通过一个具体的例子展示了如何创建一个定位在特定坐标的小三角形。

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;

}

效果