html+css实现定位三角在右上角并且文字倾斜45度

yjm2017

已于 2023-01-10 13:56:44 修改

阅读量1.9k

点赞数

分类专栏： web前端文章标签：前端

于 2023-01-10 13:55:28 首次发布

本文链接：https://blog.youkuaiyun.com/sxl2017/article/details/128628794

版权

web前端专栏收录该内容

22 篇文章

订阅专栏

<div class="box">
  <div class="text">2022-08</div>
</div>

<style>
.box{
  width:100px;
  height:100px;
  background-color: pink;
  color: #fff;
  /* Rotate div */
  transform:rotate(45deg);
  -ms-transform:rotate(45deg); /* Internet Explorer */
  -moz-transform:rotate(45deg); /* Firefox */
  -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
  -o-transform:rotate(45deg); /* Opera */

  position: absolute;
  right: -50px;
  top: -50px;
}

.text {
  position: absolute;
  bottom: 5px;
  left:21px;
  font-size:14px
}
    

</style>