html和css制作上三角和下三角

最新推荐文章于 2024-07-30 20:20:34 发布

圆野

最新推荐文章于 2024-07-30 20:20:34 发布

阅读量3.5k

点赞数

分类专栏：前端非框架常用

本文链接：https://blog.csdn.net/weixin_41716259/article/details/82783573

版权

前端非框架常用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

//html

<div class="topmsg">
    <p class="gle"></p>
    <a id="pereditor" href="javascript:;">个人资料编辑</a>
</div>

//css

.topmsg{
    position: relative;
}
.gle {
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    border-top: 1px solid #c8cbd2;
    border-left: 1px solid #c8cbd2;     /*上三角*/
    /*border-bottom:1px solid #c8cbd2; 下三角*/
    /*border-right:1px solid #c8cbd2;*/
    margin: 0 0 0;
    left: 50%;
    top: -9%;
    transform: translate(-50%, 0);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}