css实现三角形加文字

最新推荐文章于 2024-06-28 17:10:15 发布

原创最新推荐文章于 2024-06-28 17:10:15 发布 · 3.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

4 篇文章

订阅专栏

今天在写CSS的时候发现了一个问题，按照平时的写法肯定是用一张图片来做，但需求是这个地方是动态的2个字，总不能后台传图片过来吧，所以自己思索了下，还是用CSS来实现

在这里插入图片描述

实现也比较简单

<div class="product_tip">
	<div class="product_tip_bg"></div>
	<p>免费</p>
</div>

CSS部分，尺寸方便再按照设计图调整

.product_tip{
  position: absolute;
  top: 0;
  right: 0;
  width: 0.8rem;
  height: 0.8rem;
  text-align: right;
  p{
    font-size: 0.22rem;
    color: #212447;
    transform: rotate(45deg);
    position: relative;
    top: 0.02rem;
    right: -0.05rem;
  }
  .product_tip_bg{
    width: 0;
    height: 0;
    border-bottom: 0.6rem solid #ffffff;
    border-right: 0.6rem solid transparent;
    border-left: 0.6rem solid transparent;
    transform: rotate(45deg);
    position: absolute;
    top: -0.2rem;
    right: -0.4rem;
  }
}