<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0 auto;
padding: 0;
}
.warp {
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;
}
.ribbon span:active{
border: 1px solid #54CBFF;
color: rgb(197, 37, 37);
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;
}
.ribbon2 {
background-color: #54CBFF;
overflow: hidden;
white-space: nowrap;
position: absolute;
right: -40px;
transform: rotate(130deg);
box-shadow: 0 0 10px #888;
top: 107px;
}
.ribbon2 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;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="warp">
<div class="sun">
</div>
<div class="ribbon">
<span>new</span>
</div>
<div class="ribbon2">
<span>new</span>
</div>
</div>
</body>
</html>
效果如下: