css实现右上角飘带效果

最新推荐文章于 2024-08-13 09:24:34 发布

尔嵘

最新推荐文章于 2024-08-13 09:24:34 发布

阅读量1.2k

点赞数 5

分类专栏： HTML+CSS

未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！

本文链接：https://blog.csdn.net/XU441520/article/details/123478744

版权

CSS 3D效果飘带新品标志网页设计

关键词由CSDN通过智能技术生成

HTML+CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果：

完成代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/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;
			}

		</style>
	</head>
	<body>
		<div class='wrap'>
		    <div class='ribbon'>
		        <span>NEW</span>
		    </div>
		</div>

	</body>
</html>

参考：

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