IT俱乐部 CSS css实现右上角飘带效果的完整代码

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

效果:

完成代码:



	
		
			*{
				margin: 0 auto;
				padding: 0;
			}
			.wrap {
				/* 设置宽高 */
			    width: 350px;
			    height: 150px;
			    text-align: center;
			    position: relative; /* 父元素相对定位 */
			    overflow: hidden;
			    background-color: #160e41; /* 背景颜色 */
				border: 1px solid #16f5e6;
			}
			
			.ribbon {
			  /* 右上角飘带 */
			  background-color: #54CBFF; /* 左上角飘带的背景颜色 */
			  overflow: hidden;
			  white-space: nowrap; /* 文字不换行*/
			  position: absolute; /* 绝对定位 */
			  right: -40px;
			  top: 10px;
			  transform: rotate(45deg);   /* 旋转45°*/
			  box-shadow: 0 0 10px #888; /* 飘带的阴影*/
			}
			
			.ribbon span {
			  border: 1px solid #54CBFF;
			  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;
			}
 
		
NEW

参考:

【1】css实现左上角飘带效果

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

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/css/14014.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部