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

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

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

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

    • index.html

使用方法

*, 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. 平台上所有素材资源,需注册登录会员方能正常下载。
2. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励20K币
3. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
4. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 图片特效&上传

js实现的带灰度缩略图的图片幻灯片切换特效代码

一款带缩略图的图片切换特效,可点击缩略图进行切换主大图,并且原色高亮显示当前缩略图,其它缩略图灰度显示。
  图片特效&上传
 104  

jquery超有创意的响应式炫酷的相册幻灯片特效

在线相册合成、分离动画特效,超有那种科技感,大家看演示吧!
  图片特效&上传
 164  

原生js图片反向动画拆分滚动效果

一款很有趣的图片滚动特效,拉动滚动条上下两组图片反方向拆分。
  图片特效&上传
 170  

jquery响应式图片放大弹出层插件

鼠标悬停在图片上,鼠标指针变为放大镜图标,点击即可放大弹出图片。
  图片特效&上传
 180  

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

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