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

//html

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

你可能感兴趣的:(前端非框架常用)