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

版权声明：仅仅菜鸟，愿帮到工作中预bug困惑的您 https://blog.csdn.net/weixin_41716259/article/details/82783573

//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);
}