Aneka Kotak Rounded

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Pure CSS folded-corner effect &#8211; Nicolas Gallagher</title>
    <meta name="description" content="Create a simple CSS folded-corner effect using pseudo-elements. Semantic HTML and no images.">
    <link rel="canonical" href="/pure-css-folded-corner-effect/demo/">
    <style>


      /* == START FOLDED CORNERS */

      .note {
          position:relative;
          width:480px;
          padding:1em 1.5em;
          margin:2em auto;
          color:#fff;
          background:#97C02F;
          overflow:hidden;
      }

      .note:before {
          content:"";
          position:absolute;
          top:0;
          right:0;
          border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
          border-style:solid;
          border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
          background:#658E15; /* For when also applying a border-radius */
          display:block; width:0; /* Only for Firefox 3.0 damage limitation */
          /* Optional: shadow */
          -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
          -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
          box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
      }

      .note.red {background:#C93213;}
      .note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}

      .note.blue {background:#53A3B4;}
      .note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}

      .note.taupe {background:#999868;}
      .note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}

      /* ROUNDED CORNERS VERSION
       * All modern browsers can produce this effect with a single pseudo-element.
       * However, they all have bugs (mainly to do with border-radius) that make this a bit tricky.
       * As far as I can tell, this is the only cross-browser method for the moment.
       * Cant use this method for the simple effect because Opera 11 will only show backgrounds
       * through transparent borders if there is a border-radius applied.
       */

      .note.rounded {
          -webkit-border-radius:5px 0 5px 5px;
          -moz-border-radius:5px 0 5px 5px;
          border-radius:5px 0 5px 5px;
      }

      .note.rounded:before {
          border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
          border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
          -webkit-border-bottom-left-radius:5px;
          -moz-border-radius:0 0 0 5px;
          border-radius:0 0 0 5px;
      }

      .note p {margin:0;}
      .note p + p {margin:1.5em 0 0;}
      /* == END FOLDED CORNERS */


    </style>

</head>

<body>

<div class="container header">
    <header>
        <hgroup>
            <h1>Pure CSS folded-corner effect</h1>
            <h2>By <a href="http://nicolasgallagher.com">Nicolas Gallagher</a></h2>
        </hgroup>
        <p><em>Known support</em>: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.</p>
    </header>
</div>

<div class="note">
    <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>
    <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>
</div>

<div class="note red rounded">
    <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>
</div>

<div class="note blue">
    <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>
</div>

<div class="note taupe">
    <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>
</div>

<div class="container footer">
    <p>Read the article: <a href="/pure-css-folded-corner-effect/">Pure CSS folded-corner effect</a>.</p>
    <p class="follow"><a href="https://twitter.com/necolas">You can find me on <span>Twitter</span></a>.</p>
</div>

</body>
</html>