css之右上角带弧形的三角形标签文字45度倾斜显示

最新推荐文章于 2024-05-06 16:09:47 发布

咕噜咕噜掉下mysta

最新推荐文章于 2024-05-06 16:09:47 发布

阅读量1.8k

点赞数 2

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_43777572/article/details/127316668

版权

实现效果

html

<div class="round-triangle"></div>
     <div class="myPoints_demo">
         <span class="points">12元</span>
     </div>
<div class="state">可提现</div>

css

.myPoints_demo{
    width: 460px;
    height: 80px;
    line-height: 80px;
    border-radius: 12px;
    background-color: #74B9E9; 
}

.points{
    margin-left:35px;
    color: white;
    font-weight:bolder;
    font-size:28px;
}

.state{
	width: max-content;
    color: #74B9E9;
    transform: rotate(45deg) translateY(-125px) translateX(33px);
    position: absolute;
    right: 147px;
    font-size: 12px;
}
    
/* 设置第一个圆角 */
.round-triangle{
    margin-left: 410px;
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: #74B9E9;
    border-top-right-radius: 12px; 
}

/* 在首部和尾部添加两个绝对定位的图形覆盖部分上面图形设置剩下两个圆角 */
.round-triangle:before, .round-triangle:after{
    content:"";
    width: 30px;
    height: 30px;
    background-color: #fff;
    position: absolute;  
    margin-left: 20px;
}  

/* 设置旋转、缩放、倾斜和平移让两个伪元素边缘与上面图形边缘重合 */
.round-triangle:before{
    transform:rotate(-135deg) skewX(-45deg) scale(1.45,0.7) translate(0,-50%); 
} 

.round-triangle:after{
    transform:rotate(135deg) skewY(-45deg) scale(0.7,1.45) translate(50%,0);
}