Pure CSS folded-corner effect(IE8以上,其他瀏覽器可以)

FROM: http://nicolasgallagher.com/pure-css-folded-corner-effect/

 

代码

  1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
  2  < html  xmlns ="http://www.w3.org/1999/xhtml" >
  3 
  4  < head >
  5  < meta  content ="text/html; charset=utf-8"  http-equiv ="Content-Type"   />
  6  < title > Pure CSS folded-corner effect &#8211; Nicolas Gallaghe </ title >
  7  < style  type ="text/css" >
  8  /*  ------------------------------------------
  9  PURE CSS FOLDED CORNER EFFECT
 10  by Nicolas Gallagher
 11  - http://nicolasgallagher.com/pure-css-folded-corner-effect/
 12 
 13  http://nicolasgallagher.com
 14  http://twitter.com/necolas
 15 
 16  Created: 09 December 2010
 17  Version: 1.2 (Updated 14 December 2010)
 18 
 19  Dual licensed under MIT and GNU GPLv2   Nicolas Gallagher 
 20  ------------------------------------------  */
 21 
 22 
 23  /*  ----------------------------------------------------------------------------------------------------------------------------
 24  == GENERAL STYLES
 25  ** ----------------------------------------------------------------------------------------------------------------------------  */
 26 
 27  html, body                              { padding : 0 ;  margin : 0 ;  font : 1em/1.4 Cambria, Georgia, sans-serif ;  color : #333 ;  background : #fff ; }
 28  header, hgroup                          { display : block ; }
 29 
 30  a:link, a:visited                       { border-bottom : 1px solid #c55500 ;  color : #c55500 ;  text-decoration : none ; }
 31  a:visited                               { border-bottom : 1px solid #730800 ;  color : #730800 ; }
 32  a:hover, a:focus, a:active              { border : 0 ;  color : #fff ;  background : #c55500 ; }
 33  a:visited:hover,
 34   a:visited:focus,
 35   a:visited:active                       { color : #fff ;  background : #730800 ; }
 36 
 37  .container                              { width : 540px ;  padding : 0 0 10px ;  margin : 0 auto 30px ; }
 38  .header                                 { border-bottom : 1px solid #ddd ; }
 39  .footer                                 { padding : 10px 0 30px ;  border-top : 1px solid #ddd ;  margin-bottom : 0 ; }
 40 
 41  h1                                      { margin : 1em 0 0 ;  font-size : 2.5em ;  font-weight : normal ;  line-height : 1.2 ;  text-align : center ; }
 42  h2                                      { margin : 0.5em 0 1.5em ;  font-size : 1.25em ;  font-weight : normal ;  font-style : italic ;  text-align : center ; }
 43  p                                       { margin : 1em 0 ;  line-height : 1.4em ; }
 44 
 45  pre                                     { margin : 1.4em 0 ;  font-size : 12px ;  line-height : 1.4em ;  white-space : pre-wrap ;  word-wrap : break-word ; }
 46 
 47  .follow                                 { clear : both ;  margin-top : 2em ;  font-size : 1.125em ; }
 48  .follow span                            { font-weight : bold ; }
 49 
 50 
 51  /*  ----------------------------------------------------------------------------------------------------------------------------
 52  == FOLDED CORNERS
 53  ** ----------------------------------------------------------------------------------------------------------------------------  */
 54 
 55  .note  {
 56      position : relative ;
 57      width : 480px ;
 58      padding : 1em 1.5em ;
 59      margin : 2em auto ;
 60      color : #fff ;
 61      background : #97C02F ;
 62      overflow : hidden ;
 63  }
 64 
 65  .note:before  {
 66      content : "" ;
 67      position : absolute ;
 68      top : 0 ;
 69      right : 0 ;
 70      border-width : 0 16px 16px 0 ;   /*  This trick side-steps a webkit bug  */
 71      border-style : solid ;
 72      border-color : #fff #fff #658E15 #658E15 ;   /*  A bit more verbose to work with .rounded too  */
 73      background : #658E15 ;   /*  For Opera when also applying a border-radius  */
 74      display : block ;  width : 0 ;   /*  Only for Firefox 3.0 damage limitation  */
 75       /*  Optional: shadow  */
 76      -webkit-box-shadow : 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2) ;
 77         -moz-box-shadow : 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2) ;
 78              box-shadow : 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2) ;
 79  }
 80 
 81  .note.red  { background : #C93213 ; }
 82  .note.red:before  { border-color : #fff #fff #97010A #97010A ;  background : #97010A ; }
 83 
 84  .note.blue  { background : #53A3B4 ; }
 85  .note.blue:before  { border-color : #fff #fff transparent transparent ;  background : transparent ; }
 86 
 87  .note.taupe  { background : #999868 ; }
 88  .note.taupe:before  { border-color : #fff #fff #BDBB8B #BDBB8B ;  background : #BDBB8B ; }
 89 
 90  /*  ROUNDED CORNERS VERSION
 91   * All modern browsers can produce this effect with a single pseudo-element.
 92   * However, they all have bugs (mainly to do with border-radius) that make this a bit tricky.
 93   * As far as I can tell, this is the only cross-browser method for the moment.
 94   * Can't use this method for the simple effect because Opera 11 will only show backgrounds
 95   * through transparent borders if there is a border-radius applied.
 96    */
 97   
 98  .note.rounded  {
 99      -webkit-border-radius : 5px ;
100      -moz-border-radius : 5px ;
101      border-radius : 5px ;
102  }
103 
104  .note.rounded:before  {
105      border-width : 8px ;   /*  Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10)  */
106      border-color : #fff #fff transparent transparent ;   /*  Avoids the 1px 'step' in webkit. Background colour shows through  */
107      -webkit-border-bottom-left-radius : 5px ;
108      -moz-border-radius : 0 0 0 5px ;
109      border-radius : 0 0 0 5px ;
110  }
111 
112  .note p  { margin : 0 ; }
113  .note p + p  { margin : 1.5em 0 0 ; }
114  </ style >
115  </ head >
116 
117  < body >
118  < div  class ="container header" >
119       < header >
120           < hgroup >
121               < h1 > Pure CSS folded-corner effect </ h1 >
122               < h2 > By  < a  href ="http://nicolasgallagher.com" > Nicolas Gallagher </ a ></ h2 >
123           </ hgroup >
124 
125           < p >< em > Known support </ em > : Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+. </ p >
126       </ header >
127  </ div >
128 
129  < div  class ="note" >
130       < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. </ p >
131       < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. </ p >
132  </ div >
133 
134  < div  class ="note red rounded" >
135       < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. </ p >
136  </ div >
137 
138  < div  class ="note blue" >
139       < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. </ p >
140  </ div >
141 
142  < div  class ="note taupe" >
143       < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. </ p >
144  </ div >
145 
146  < div  class ="container footer" >
147       < p > Read the article:  < a  href ="http://nicolasgallagher.com/pure-css-folded-corner-effect/" > Pure CSS folded-corner effect </ a > . </ p >
148       < p  class ="follow" >< a  href ="http://twitter.com/necolas" > You can find me on  < span > twitter </ span ></ a > . </ p >
149  </ div >
150 
151  </ body >
152 
153  </ html >
154