Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 8th, 2012  |  syntax: None  |  size: 3.11 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. CSS only cross browser clipped corners?
  2. <style type="text/css">
  3. <!--
  4. div.big {
  5.     position: relative;
  6.     width: 600px;
  7.     height: 200px;
  8.     background:#FFF url(images/pattern.png)
  9.     border: solid 1px black;
  10. }
  11.  
  12. div.top-left-b {
  13.     width: 0;
  14.     height: 0;
  15.     position: absolute;
  16.     top: 0px;
  17.     left: 0px;
  18.     border-top: solid 40px black;
  19.     border-right: solid 40px transparent;
  20.     z-index: 1;
  21. }
  22.  
  23. div.top-left-w {
  24.     width: 0;
  25.     height: 0;
  26.     position: absolute;
  27.     top: -1px;
  28.     left: -1px;
  29.     border-top: solid 40px white;
  30.     border-right: solid 40px transparent;
  31.     z-index: 2;
  32. }
  33.  
  34. div.top-right-b {
  35.     width: 0;
  36.     height: 0;
  37.     position: absolute;
  38.     top: 0px;
  39.     right: 0px;
  40.     border-top: solid 40px black;
  41.     border-left: solid 40px transparent;
  42.     z-index: 1;
  43. }
  44.  
  45. div.top-right-w {
  46.     width: 0;
  47.     height: 0;
  48.     position: absolute;
  49.     top: -1px;
  50.     right: -1px;
  51.     border-top: solid 40px white;
  52.     border-left: solid 40px transparent;
  53.     z-index: 2;
  54. }
  55.  
  56. div.bottom-left-b {
  57.     width: 0;
  58.     height: 0;
  59.     position: absolute;
  60.     bottom: 0px;
  61.     left: 0px;
  62.     border-bottom: solid 40px black;
  63.     border-right: solid 40px transparent;
  64.     z-index: 1;
  65. }
  66.  
  67. div.bottom-left-w {
  68.     width: 0;
  69.     height: 0;
  70.     position: absolute;
  71.     bottom: -1px;
  72.     left: -1px;
  73.     border-bottom: solid 40px white;
  74.     border-right: solid 40px transparent;
  75.     z-index: 2;
  76. }
  77.  
  78. div.bottom-right-b {
  79.     width: 0;
  80.     height: 0;
  81.     position: absolute;
  82.     bottom: 0px;
  83.     right: 0px;
  84.     border-bottom: solid 40px black;
  85.     border-left: solid 40px transparent;
  86.     z-index: 1;
  87. }
  88.  
  89. div.bottom-right-w {
  90.     width: 0;
  91.     height: 0;
  92.     position: absolute;
  93.     bottom: -1px;
  94.     right: -1px;
  95.     border-bottom: solid 40px white;
  96.     border-left: solid 40px transparent;
  97.     z-index: 2;
  98. }
  99. -->
  100. </style>
  101.  
  102. <div class="big">
  103.     <div class="top-left-b"><!-- --></div>
  104.     <div class="top-left-w"><!-- --></div>
  105.     <div class="top-right-b"><!-- --></div>
  106.     <div class="top-right-w"><!-- --></div>
  107.     <div class="bottom-left-b"><!-- --></div>
  108.     <div class="bottom-left-w"><!-- --></div>
  109.     <div class="bottom-right-b"><!-- --></div>
  110.     <div class="bottom-right-w"><!-- --></div>
  111. </div>
  112.        
  113. <div class="outer-clipped-box">
  114.     <div class="inner-clipped-box">
  115.         <div class="content-clipped-box">
  116.             Content here.
  117.         </div>
  118.     </div>
  119. </div>
  120.        
  121. .outer-clipped-box {
  122.     height: 200px;
  123.     width: 200px;
  124.     overflow: hidden;
  125. }
  126. .inner-clipped-box {
  127.     height: 250px;
  128.     width: 250px;
  129.     background: #ddf;
  130.  
  131.     -moz-transform-origin: 140px 84px;
  132.     -moz-transform: rotate(45deg);
  133.     -webkit-transform-origin: 140px 84px;
  134.     -webkit-transform: rotate(45deg);
  135.     transform-origin: 140px 84px;
  136.     transform: rotate(45deg);
  137. }
  138.  
  139. /* Undo rotation, to get the content in the right position*/
  140. .content-clipped-box {
  141.     height: 150px;
  142.     width: 150px;
  143.  
  144.     -moz-transform-origin: center center;
  145.     -moz-transform: rotate(-45deg) translate(0,70px);
  146.     -webkit-transform-origin: center center;
  147.     -webkit-transform: rotate(-45deg) translate(0,70px);
  148.     transform-origin: center center;
  149.     transform: rotate(-45deg) translate(0,70px);
  150. }
create a new version of this paste RAW Paste Data