<div class="ribbon">
        <span>THE</span>
        <span>CODE</span>
        <span>BLOCK</span>
    </div>
<div class="byline"><p>Detailed tutorial on: <a href="http://thecodeblock.com/realistic-soft-search-box-in-pure-css/">TheCodeBlock</a></p></div>

body,html{
    height:100%;
    width:100%;
    background:#45b0ff;
    position:absolute;
    box-shadow:inset 0 0 250px #002c67;
}
.ribbon{
            margin: 150px auto;
            width:250px;
            position:relative;
}
       .ribbon span{
            display: block;
/*            background:red;*/
            font-family:verdana;
            font-weight:900;
            font-size:30px;
            color:#0058a3;
            padding-top:30px;
            line-height: 0;
            text-align: center;
            margin-bottom:10px;
        /*transform*/
    -webkit-transform:skew(-10deg) rotate(-10deg);
       -moz-transform:skew(-10deg) rotate(-10deg);
        -ms-transform:skew(-10deg) rotate(-10deg);
         -o-transform:skew(-10deg) rotate(-10deg);
            transform:skew(-10deg) rotate(-10deg);
                }
            .ribbon span:after{
            content:"";
            height:60px;
            display:block;
            background:#fcfcfc;
            position:relative;
            top:-30px;
            z-index:-10;
        }
 .ribbon span:before{
            content:"";
            width:225px;
            height:60px;
            background:#0058a3;
            position:absolute;
            top:51px;
            left:12px;
            display:block;
            /*transform*/
-webkit-transform:skew(25deg) rotate(25deg);
   -moz-transform:skew(25deg) rotate(25deg);
    -ms-transform:skew(25deg) rotate(25deg);
     -o-transform:skew(25deg) rotate(25deg);
        transform:skew(25deg) rotate(25deg);
            z-index:-20;
        }
            
            .ribbon span:last-child:before{
            display:none;
        }
 .ribbon:before{
            content:"";
            width:0;
            height:0;
            border:29px solid #fcfcfc;
            border-right-color:transparent;
            /*transform*/
-webkit-transform:rotate(-10deg);
   -moz-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
     -o-transform:rotate(-10deg);
        transform:rotate(-10deg);
            position:absolute;
            top:-24px;
            right:-50px;
        }
            .ribbon:after{
            content:"";
            width:0;
            height:0;
            border:29px solid #fcfcfc;
            border-left-color:transparent;
            /*transform*/
-webkit-transform:rotate(-10deg);
   -moz-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
     -o-transform:rotate(-10deg);
        transform:rotate(-10deg);
            position:absolute;
            bottom:6px;
            left:-50px;
        }
            
            .byline{
  text-align:center;
  font-size:18px;
}
.byline a{
  text-decoration:none;
  color: #1f5350;
}