Realistic CSS ribbon

Cinta realista hecha con CSS

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Realistic CSS ribbon</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .contcinta {
position:relative;
margin:0 auto;
margin-bottom: 70px;
width:150px;
height:250px;
}
.contcinta::before {
position: absolute; 
top:60px;
left: 147px;
display: block;
width: 3px;
height: 228px;
box-shadow: 1px 5px 10px 3px black;
content: "";
}
.barra {
position: absolute;
top: 1px;
left: -225px;
display: block;
margin: 0 auto;
width: 600px;
height: 70px;
border-radius:30px;
background: #1d262b;
background: linear-gradient(to bottom, #1d262b 0%,#565d60 57%,#757a7f 74%,#28343b 100%);
box-shadow: 5px 1px 5px #333;
}
.cintaver {
position:relative;
width:150px;
height:150px;
background: #9a0808; 
background: linear-gradient(to bottom, #9e0b0b 0%,#bf3624 3%,#9a0808 13%,#9a0808 18%,#c43b29 60%,#bc2e1e 74%,#9a0808 100%,#9a0808 100%);
}
.cintaver:before {
position:relative;
top:150px;
display:block;
width:0;
height:0;
border-width: 75px;
border-style:solid;
border-color:#9A0808 #9A0808 transparent #9A0808;
content:"";
}
.cintaver:after {
position:absolute;
top: 0;
left: 8px;
padding: 40px 0 0 0;
width: 130px;
height:250px;  
border-right: 2px dashed #cc3D29;
border-left: 2px dashed #cc3D29;  
color:#880000;         
content: "OLO BLOGGER";  
text-align:center;
text-shadow: 1px 0px  #cc3d29;
font:normal bold 24px/26px arial, serif;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="contcinta">
  <div class="barra"></div>
  <div class="cintaver"></div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.contcinta {
position:relative;
margin:0 auto;
margin-bottom: 70px;
width:150px;
height:250px;
}
.contcinta::before {
position: absolute; 
top:60px;
left: 147px;
display: block;
width: 3px;
height: 228px;
box-shadow: 1px 5px 10px 3px black;
content: "";
}
.barra {
position: absolute;
top: 1px;
left: -225px;
display: block;
margin: 0 auto;
width: 600px;
height: 70px;
border-radius:30px;
background: #1d262b;
background: linear-gradient(to bottom, #1d262b 0%,#565d60 57%,#757a7f 74%,#28343b 100%);
box-shadow: 5px 1px 5px #333;
}
.cintaver {
position:relative;
width:150px;
height:150px;
background: #9a0808; 
background: linear-gradient(to bottom, #9e0b0b 0%,#bf3624 3%,#9a0808 13%,#9a0808 18%,#c43b29 60%,#bc2e1e 74%,#9a0808 100%,#9a0808 100%);
}
.cintaver:before {
position:relative;
top:150px;
display:block;
width:0;
height:0;
border-width: 75px;
border-style:solid;
border-color:#9A0808 #9A0808 transparent #9A0808;
content:"";
}
.cintaver:after {
position:absolute;
top: 0;
left: 8px;
padding: 40px 0 0 0;
width: 130px;
height:250px;  
border-right: 2px dashed #cc3D29;
border-left: 2px dashed #cc3D29;  
color:#880000;         
content: "OLO BLOGGER";  
text-align:center;
text-shadow: 1px 0px  #cc3d29;
font:normal bold 24px/26px arial, serif;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Realistic CSS ribbon ) is write by Oloman, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Oloman