css实现左上角飘带效果的完整代码


Posted in HTML / CSS onMarch 18, 2022

css实现左上角飘带效果效果如下:

css实现左上角飘带效果的完整代码

html代码

<div class='wrap'>
    <div class='ribbon'>
        <span>测试1</span>
    </div>
</div>

css代码

.wrap {
    /* 最外层的div容器 */
    min-width: 200px;
    min-height: 200px;
    text-align: center;
    position: relative; /* 父元素相对定位 */
    overflow: hidden;
    border: 1px solid #F3F3F3; /* 边框 */
    background-color: #3EA1FF36; /* 背景颜色 */
}

.ribbon {
  /* 左上角飘带 */
  background-color: #1890FF; /* 左上角飘带的背景颜色 */
  overflow: hidden;
  white-space: nowrap; /* 文字不换行*/
  position: absolute; /* 绝对定位 */
  left: -40px;
  top: 10px;
  transform: rotate(-45deg);   /* 旋转45°*/
  box-shadow: 0 0 10px #888; /* 飘带的阴影*/
}

.ribbon span {
  border: 1px solid #1890FF;
  color: #fff;
  display: block;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 5px 50px;
  text-align: center;
  text-shadow: 0 0 5px #444;
}

到此这篇关于css实现左上角飘带效果的完整代码的文章就介绍到这了,更多相关css左上角飘带内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
CSS精灵图的原理与使用方法介绍
CSS3实现指纹特效代码
css3应用示例:新增的选择器
Mar 16 #HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 #HTML / CSS
css3新特性的应用示例分析
Mar 16 #HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
HTML中的表单元素介绍
You might like
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
php url路由入门实例
2014/04/23 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
使javascript也能包含文件
2006/10/26 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
numpy中矩阵合并的实例
2018/06/15 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
python入门教程之基本算术运算符
2020/11/13 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
项目合作意向书模板
2014/07/29 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
年底个人总结范文
2015/03/10 职场文书
毕业论文致谢词
2015/05/14 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis