做网站的公司叫什么问题,信息部网站建设工作计划,wordpress 多媒体图片显示不了,装修免费咨询平台文章目录 写在前面涉及知识点实现效果1、实现过程1.1左上角飘带Html代码Css代码效果 1.2右上角飘带Html代码Css代码效果 2、源码分享2.1 百度网盘2.2 123网盘2.3 邮箱留言 总结 写在前面
其实在公司页面开发过程就遇到过#xff0c;需要在方块右上角展示一个斜的文字或者告警… 文章目录 写在前面涉及知识点实现效果1、实现过程1.1左上角飘带Html代码Css代码效果 1.2右上角飘带Html代码Css代码效果 2、源码分享2.1 百度网盘2.2 123网盘2.3 邮箱留言 总结 写在前面
其实在公司页面开发过程就遇到过需要在方块右上角展示一个斜的文字或者告警数目我实现的效果就是类似下面这样的图形有个推荐标签但是当时年轻实现起来的方式贴别的笨重我是用了一个相对定位然后设置图片背景色的方式但是如果想改上面文字的话需要重新整图片。今天我就带大家重新认识CSS看看它的功能之强大也就是不用设置背景图也能实现左右上飘带功能。
涉及知识点
CSS实现左上角飘带效果CSS实现右上角飘带效果CSS实现左上角斜标签效果CSS实现右上角斜标签效果纯CSS实现标签效果展示。 版权声明此文原创于CSDN博主-《拄杖盲学轻声码》主页有很多分享的代码期待您的访问。
实现效果 1、实现过程
1.1左上角飘带
首先我们创建一个div容器然后创建一个子节点将飘带效果放在子节点上面。 其实这样说大家都会说我说下这个实现的核心首先我们创建这样的结构是很简单的如下所示
只要创建好父子节点然后设置相对便宜量即可但是我们要实现的效果是斜的在左上角那么我们换个思维去想要是能对子节点进行整体角度的旋转45度就可以如下图所示
最后我们再挪一个角度设置父节点overflow隐藏属性即可实现我们想要的效果 如下所示源码与效果
Html代码
div classpartdomdiv classfather father1div classson1span今日推荐/span/div/div
/div
div classpartdomdiv classfather father1div classson2span黄大大帅/span/div/div
/divCss代码
.partdom {width: 200px;height: 200px;background-color: #fff;margin: 10px;float: left;
}.father {width: 100%;height: 100%;color: red;background-color: #dbd2ce;
}.father1 {/* 最外层的div容器 */min-width: 200px;min-height: 200px;text-align: center;position: relative;/* 父元素相对定位 */overflow: hidden;border: 1px solid #F3F3F3;/* 边框 */background-color: #3EA1FF36;/* 背景颜色 */
}.son1 {/* 左上角飘带 */background-color: #1890FF;/* 左上角飘带的背景颜色 */overflow: hidden;white-space: nowrap;/* 文字不换行*/position: absolute;/* 绝对定位 */left: -45px;top: 20px;transform: rotate(-45deg);/* 旋转45°*/box-shadow: 0 0 10px #888;/* 飘带的阴影*/
}.son1 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;
}.son2 {/* 左上角飘带 */background-color: #FF7F27;/* 左上角飘带的背景颜色 */overflow: hidden;white-space: nowrap;/* 文字不换行*/position: absolute;/* 绝对定位 */left: -54px;top: -8px;transform: rotate(-45deg);/* 旋转45°*/box-shadow: 0 0 10px #888;/* 飘带的阴影*/
}.son2 span {border: 1px solid #FF7F27;color: #fff;display: block;font: bold 12px Helvetica Neue, Helvetica, Arial, sans-serif;margin: 1px 0;padding: 20px 50px;text-align: center;text-shadow: 0 0 5px #444;
}效果 1.2右上角飘带
其实右上角和左上角概念是一样的我们只是转个方向这里实现过程同1.1我就不进行过多的描述了。
Html代码
div classpartdomdiv classfather father1div classson3span清仓立减/span/div/div
/div
div classpartdomdiv classfather father1div classson4span明日上新/span/div/div
/divCss代码
.son3 {/* 左上角飘带 */background-color: #df493f;/* 左上角飘带的背景颜色 */overflow: hidden;white-space: nowrap;/* 文字不换行*/position: absolute;/* 绝对定位 */right: -54px;top: -8px;transform: rotate(45deg);/* 旋转45°*/box-shadow: 0 0 10px #888;/* 飘带的阴影*/
}.son3 span {border: 1px solid #df493f;color: #fff;display: block;font: bold 12px Helvetica Neue, Helvetica, Arial, sans-serif;margin: 1px 0;padding: 20px 50px;text-align: center;text-shadow: 0 0 5px #444;
}.son4 {/* 左上角飘带 */background-color: #1890FF;/* 左上角飘带的背景颜色 */overflow: hidden;white-space: nowrap;/* 文字不换行*/position: absolute;/* 绝对定位 */right: -45px;top: 20px;transform: rotate(45deg);/* 旋转45°*/box-shadow: 0 0 10px #888;/* 飘带的阴影*/
}.son4 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;
}效果 2、源码分享
2.1 百度网盘
链接https://pan.baidu.com/s/1rWjXpm24WJs9_uars6QPsw 提取码hdd6
2.2 123网盘
链接https://www.123pan.com/s/ZxkUVv-HwI4.html 提取码hdd6
2.3 邮箱留言
评论区留下您的邮箱账号博主看到第一时间发给您祝您生活愉快 总结
以上就是今天要讲的内容本文主要介绍了CSS实现左上角飘带效果CSS实现右上角飘带效果CSS实现左上角斜标签效果CSS实现右上角斜标签效果纯CSS实现标签效果展示也期待大家一起进步哈2023年一起加油
版权声明此文原创于CSDN博主-《拄杖盲学轻声码》主页有很多分享的代码期待您的访问。
