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 相关文章推荐
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
初识javascript 文档碎片
2010/07/13 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python类的基础入门知识
2008/11/24 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
django表单的Widgets使用详解
2019/07/22 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
全民创业工作总结
2015/08/13 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python