限时优惠活动
亲爱的苦力吧用户，我们为了回馈新老用户一直以来的鼎力支持，即日起（2025-02-06至2025-03-06）凡是购买苦力吧VIP/充值K币的新老用户，都直接可获得买一送一的优惠馈赠。例如：购买一个月的VIP会员可直接获得两个月的VIP会员；充值100K币可直接获得200K币，以此类推！有任何疑问可联系在线客服，感谢各位用户对苦力吧素材的信任与厚爱，我们将一如既往的给大家上新更多优质的素材源码，祝大家开工大吉、工作顺利、心想事成。
  1. 首页
  2. 网页特效
  3. 图片特效&上传

css图片右上角添加自定义文字的斜三角样式代码

所属分类： 网页特效-图片特效&上传    2023-12-17 11:58:10

 91.1K  6  查看评论 (2)
css图片右上角添加自定义文字的斜三角样式代码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载  我要建站

css图片右上角添加自定义文字的斜三角样式代码（共5个文件）

    • index.html

使用方法

  • code
  • source
  1. *, html {

  2.   -webkit-box-sizing: border-box;

  3.   -moz-box-sizing: border-box;

  4.   box-sizing: border-box;

  5. }

  6. 

  7. figure {

  8.   margin: 0px;

  9. }

  10. 

  11. img {

  12.   max-width: 100%;

  13. }

  14. 

  15. /* ================== Badge Products CSS ========================*/

  16. .products {

  17.   max-width: 100%;

  18.   margin: 0 auto;

  19. }

  20. 

  21. .products ul {

  22.   margin: 0px;

  23.   text-align: center;

  24. }

  25. 

  26. .products ul li {

  27.   width: 320px;

  28.   height: 213px;

  29.   background: #f8f8f8;

  30.   display: inline-block;

  31.   position: relative;

  32.   margin: 15px;

  33.   padding: 0px;

  34.   box-sizing: border-box;

  35. }

  36. 

  37. /* ================== Badge Overlay CSS ========================*/

  38. .badge-overlay {

  39.   position: absolute;

  40.   left: 0%;

  41.   top: 0px;

  42.   width: 100%;

  43.   height: 100%;

  44.   overflow: hidden;

  45.   pointer-events: none;

  46.   z-index: 100;

  47.   -webkit-transition: width 1s ease, height 1s ease;

  48.   -moz-transition: width 1s ease, height 1s ease;

  49.   -o-transition: width 1s ease, height 1s ease;

  50.   transition: width 0.4s ease, height 0.4s ease;

  51. }

  52. 

  53. /* ================== Badge CSS ========================*/

  54. .badge {

  55.   margin: 0;

  56.   padding: 0;

  57.   color: white;

  58.   padding: 10px 10px;

  59.   font-size: 15px;

  60.   font-family: Arial, Helvetica, sans-serif;

  61.   text-align: center;

  62.   line-height: normal;

  63.   text-transform: uppercase;

  64.   background: #ed1b24;

  65. }

  66. 

  67. .badge::before, .badge::after {

  68.   content: "";

  69.   position: absolute;

  70.   top: 0;

  71.   margin: 0 -1px;

  72.   width: 100%;

  73.   height: 100%;

  74.   background: inherit;

  75.   min-width: 55px;

  76. }

  77. 

  78. .badge::before {

  79.   right: 100%;

  80. }

  81. 

  82. .badge::after {

  83.   left: 100%;

  84. }

  85. 

  86. /* ================== Badge Position CSS ========================*/

  87. .top-left {

  88.   position: absolute;

  89.   top: 0;

  90.   left: 0;

  91.   -ms-transform: translateX(-30%) translateY(0%) rotate(-45deg);

  92.   -webkit-transform: translateX(-30%) translateY(0%) rotate(-45deg);

  93.   transform: translateX(-30%) translateY(0%) rotate(-45deg);

  94.   -ms-transform-origin: top right;

  95.   -webkit-transform-origin: top right;

  96.   transform-origin: top right;

  97. }

  98. 

  99. .top-right {

  100.   position: absolute;

  101.   top: 0;

  102.   right: 0;

  103.   -ms-transform: translateX(30%) translateY(0%) rotate(45deg);

  104.   -webkit-transform: translateX(30%) translateY(0%) rotate(45deg);

  105.   transform: translateX(30%) translateY(0%) rotate(45deg);

  106.   -ms-transform-origin: top left;

  107.   -webkit-transform-origin: top left;

  108.   transform-origin: top left;

  109. }

  110. 

  111. .bottom-left {

  112.   position: absolute;

  113.   bottom: 0;

  114.   left: 0;

  115.   -ms-transform: translateX(-30%) translateY(0%) rotate(45deg);

  116.   -webkit-transform: translateX(-30%) translateY(0%) rotate(45deg);

  117.   transform: translateX(-30%) translateY(0%) rotate(45deg);

  118.   -ms-transform-origin: bottom right;

  119.   -webkit-transform-origin: bottom right;

  120.   transform-origin: bottom right;

  121. }

  122. 

  123. .bottom-right {

  124.   position: absolute;

  125.   bottom: 0;

  126.   right: 0;

  127.   -ms-transform: translateX(30%) translateY(0%) rotate(-45deg);

  128.   -webkit-transform: translateX(30%) translateY(0%) rotate(-45deg);

  129.   transform: translateX(30%) translateY(0%) rotate(-45deg);

  130.   -ms-transform-origin: bottom left;

  131.   -webkit-transform-origin: bottom left;

  132.   transform-origin: bottom left;

  133. }

  134. 

  135. .top-full {

  136.   position: absolute;

  137.   top: 0;

  138.   left: 0;

  139.   width: 100%;

  140.   text-align: center;

  141. }

  142. 

  143. .middle-full {

  144.   position: absolute;

  145.   top: 50%;

  146.   left: 0;

  147.   width: 100%;

  148.   text-align: center;

  149.   -ms-transform: translateX(0%) translateY(-50%) rotate(0deg);

  150.   -webkit-transform: translateX(0%) translateY(-50%) rotate(0deg);

  151.   transform: translateX(0%) translateY(-50%) rotate(0deg);

  152. }

  153. 

  154. .bottom-full {

  155.   position: absolute;

  156.   bottom: 0;

  157.   left: 0;

  158.   width: 100%;

  159.   text-align: center;

  160. }

  161. 

  162. /* ================== Badge color CSS ========================*/

  163. .badge.red {

  164.   background: #ed1b24;

  165. }

  166. 

  167. .badge.orange {

  168.   background: #fa7901;

  169. }

  170. 

  171. .badge.pink {

  172.   background: #ee2b8b;

  173. }

  174. 

  175. .badge.blue {

  176.   background: #00adee;

  177. }

  178. 

  179. .badge.green {

  180.   background: #b4bd00;

  181. }

*, html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

figure {
  margin: 0px;
}

img {
  max-width: 100%;
}

/* ================== Badge Products CSS ========================*/
.products {
  max-width: 100%;
  margin: 0 auto;
}

.products ul {
  margin: 0px;
  text-align: center;
}

.products ul li {
  width: 320px;
  height: 213px;
  background: #f8f8f8;
  display: inline-block;
  position: relative;
  margin: 15px;
  padding: 0px;
  box-sizing: border-box;
}

/* ================== Badge Overlay CSS ========================*/
.badge-overlay {
  position: absolute;
  left: 0%;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 100;
  -webkit-transition: width 1s ease, height 1s ease;
  -moz-transition: width 1s ease, height 1s ease;
  -o-transition: width 1s ease, height 1s ease;
  transition: width 0.4s ease, height 0.4s ease;
}

/* ================== Badge CSS ========================*/
.badge {
  margin: 0;
  padding: 0;
  color: white;
  padding: 10px 10px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  line-height: normal;
  text-transform: uppercase;
  background: #ed1b24;
}

.badge::before, .badge::after {
  content: "";
  position: absolute;
  top: 0;
  margin: 0 -1px;
  width: 100%;
  height: 100%;
  background: inherit;
  min-width: 55px;
}

.badge::before {
  right: 100%;
}

.badge::after {
  left: 100%;
}

/* ================== Badge Position CSS ========================*/
.top-left {
  position: absolute;
  top: 0;
  left: 0;
  -ms-transform: translateX(-30%) translateY(0%) rotate(-45deg);
  -webkit-transform: translateX(-30%) translateY(0%) rotate(-45deg);
  transform: translateX(-30%) translateY(0%) rotate(-45deg);
  -ms-transform-origin: top right;
  -webkit-transform-origin: top right;
  transform-origin: top right;
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
  -ms-transform: translateX(30%) translateY(0%) rotate(45deg);
  -webkit-transform: translateX(30%) translateY(0%) rotate(45deg);
  transform: translateX(30%) translateY(0%) rotate(45deg);
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  -ms-transform: translateX(-30%) translateY(0%) rotate(45deg);
  -webkit-transform: translateX(-30%) translateY(0%) rotate(45deg);
  transform: translateX(-30%) translateY(0%) rotate(45deg);
  -ms-transform-origin: bottom right;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
}

.bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  -ms-transform: translateX(30%) translateY(0%) rotate(-45deg);
  -webkit-transform: translateX(30%) translateY(0%) rotate(-45deg);
  transform: translateX(30%) translateY(0%) rotate(-45deg);
  -ms-transform-origin: bottom left;
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
}

.top-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.middle-full {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  -ms-transform: translateX(0%) translateY(-50%) rotate(0deg);
  -webkit-transform: translateX(0%) translateY(-50%) rotate(0deg);
  transform: translateX(0%) translateY(-50%) rotate(0deg);
}

.bottom-full {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

/* ================== Badge color CSS ========================*/
.badge.red {
  background: #ed1b24;
}

.badge.orange {
  background: #fa7901;
}

.badge.pink {
  background: #ee2b8b;
}

.badge.blue {
  background: #00adee;
}

.badge.green {
  background: #b4bd00;
}

站长提示：
1. 苦力吧素材官方QQ群：950875342
2. 平台上所有素材资源，需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题，每次奖励2K币。
4. PHP源码类素材，如需协助安装调试，或你有二次开发需求，可联系苦力吧客服。
5. 付费素材资源，需充值后方能下载，如有任何疑问可直接联系苦力吧客服
标签： 热销打折图片特效
相关资源 / 图片特效&上传
查看更多

jquery图片集鼠标悬停漂浮动画特效代码

 imageHover jQuery插件利用jQuery的animate（）方法实现图像悬停效果，鼠标移出终止动画特效，支持兼容主流浏览器。
  图片特效&上传
 6465  0

jquery支持拖拽触摸滑动的图片移动特效代码

 一款拖拽滑动图片查看插件，可使用鼠标拖动图片或触摸滑动事件，在固定的DIV区域内可水平或垂直移动图片。
  图片特效&上传
 7306  0

jquery支持触摸滚动的图片滑块插件

 一款支持触摸滚动特效代码，带移动端滑动和点击菜单滚动，还带了弹出层动画圆点鼠标悬停提示特效。
  图片特效&上传
 4447  0

html5手机端多图上传代码

 手机端弹出层窗口，上传多张图片预览，带删除功能。
  图片特效&上传
 6360  0

评论数(2) 回复有机会获得K币 用户协议

    铁头de科技0
    2024-01-17 15:29:59
    这个代码实用，可以用来做热销热卖这种
    回复 1
    Amireux0
    2024-01-11 15:43:07
    图片右上角加斜角热销，好漂亮
    回复 2
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论