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

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

这篇文章主要介绍了css实现左右上角飘带效果的完整代码,代码分为html和css两部分组成 code.juejin.cn/pen/7143203… code.juejin.cn/pen/7143205…

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右上角飘带效果
效果如下图：
完成代码：
<!DOCTYPE html>
		<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>
		<div class='wrap'>
		    <div class='ribbon'>
		        <span>NEW</span>
		    </div>
		</div>
	</body>
</html>
复制代码