代码改变世界

用CSS画一个角落丝带

2016-08-06 10:58  yojiaku  阅读(1067)  评论(0)  编辑  收藏  举报

最近发现CSS可以做出角落丝带的效果，用transform:rotate属性就行。

先放张效果图：

 

放代码：

<!DOCTYPE HTML>  
<html lang="en">  
<head>  
<meta charset=utf-8>  
<title>Corner Ribbon with CSS3 Example</title>  
 <style type="text/css">  
 .ribbon {  
  background-color: #a00;  
  overflow: hidden;  
  white-space: nowrap;  
  /* top left corner */  
  position: absolute;  
  left: -50px;  
  top: 40px;  
  /* for 45 deg rotation */  
  -webkit-transform: rotate(-45deg);  
     -moz-transform: rotate(-45deg);  
      -ms-transform: rotate(-45deg);  
       -o-transform: rotate(-45deg);  
          transform: rotate(-45deg);  
  /* for creating shadow */  
  -webkit-box-shadow: 0 0 10px #888;  
     -moz-box-shadow: 0 0 10px #888;  
          box-shadow: 0 0 10px #888;  
}  
.ribbon a {  
  border: 1px solid #faa;  
  color: #fff;  
  display: block;  
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;  
  margin: 1px 0;  
  padding: 10px 50px;  
  text-align: center;  
  text-decoration: none;  
  /* for creating shadow */  
  text-shadow: 0 0 5px #444;  
}  
  </style>  
</head>  
<body>  
<div class="ribbon">  
  <a href="#">Hello &nbsp;&nbsp;  Yojiaku</a>  
</div>  
</body>  
</html>

加上自己想要的样式，怎样，是不是敲简单！

只是将一个div翻转了45度而已。