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

骑猪看日落 2021-12-10 13:19 180阅读 0赞

FROM: [http://nicolasgallagher.com/pure-css-folded-corner-effect/][http_nicolasgallagher.com_pure-css-folded-corner-effect]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 代码

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

转载于:https://www.cnblogs.com/geovindu/archive/2010/12/18/1909850.html

[http_nicolasgallagher.com_pure-css-folded-corner-effect]: http://nicolasgallagher.com/pure-css-folded-corner-effect/
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211210/169adb1937724dbfae743244a6c37649.png