【CSS3】右上角三角形标签样式
前端笔记 2022-10-31 17:35:07

 在这里插入图片描述

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.     <div class="box">  
  3.       <div class="sanjiao"></div>  
  4.       <div class="sanjiao-text">封存</div>  
  5.     </div>  
  6.   </body>  

 

优化：(就算改文字数量或者是三角形大小也不会变形了)

设置与三角形一样的

CSS Code复制内容到剪贴板
  1. .sanjiao{  
  2.    position: absolute;  
  3.    top: 0;  
  4.    rightright: 0;  
  5.    height: 60px;  
  6.    width: 60px;  
  7.    background-color: red;  
  8.    clip-path: polygon(0 0, 100% 100%,100% 0);  
  9.  }  
  10.  .sanjiao-text{  
  11.    position: absolute;  
  12.    top: 0;  
  13.    rightright: 0;  
  14.    z-index: 4;  
  15.    color: #fff;  
  16.    transform: rotate(45deg);  
  17.    transform-origin: 50% 50%;  
  18.    height: 60px;  
  19.    width: 60px;  
  20.    text-align: center;  
  21.    line-height: 30px;  
  22.    whitewhite-space: nowrap;  
  23.   
  24.  }  

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/640.html

上一篇 js获取url地址栏参数的方法，解决中文乱码问题
下一篇 swiper左右滑动时导航高亮
相关的文章
Powered by yoyo苏ICP备15045725号