CSS3做一個三角,並將文字旋轉

不說廢話,直接上圖吧



<div id="productStatus">
					<span>
						<em>已上架</em>
					</span>
				</div>



#productStatus{
            position: absolute;
            right: 0;
            top: 0;
            height: 1.81rem;
            width: 1.81rem;
            display: flex;
            align-items: center;
            span{
                position: absolute;
                top: 0;
                right: 0;
                width: 0;
                height: 0;
                border-top: 1.81rem solid  #81D8D0;
                border-left: 1.81rem solid transparent;
                em{
                    position: absolute;
                    top: -1.8rem;
                    right: 0rem;
                    height: 1.27rem;
                    width: 1.27rem;
                    line-height: 1.2rem;
                    text-align: center;
                    font-size: 0.29rem;
                    color: #fff;
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                } 
            }   
        }




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章