.ribbon{
    margin-left: 50px;
    margin-top: -50px;
    font-size:10px;
    position:relative;
    display:inline-block;
    margin:2em;
    text-align:center;
  }
  .text{
    display:inline-block;
    color: #EBECED;
    padding:0.5em 1em;
    
    line-height:1.2em;
    background: #212529eb;
    position:relative;
  }
  .ribbon:after,.ribbon:before,
  .text:before,.text:after,
  .bold:before{
    content:'';
    position:absolute;
    border-style:solid;
  }
  .ribbon:before{
    top:0.3em; left:0.2em;
    width:100%; height:100%;
    border:none;
    background:#EBECED;
    z-index:-2;
  }
  .text:before{
    bottom:100%; left:0;
    border-width: .5em .7em 0 0;
    border-color: transparent #212529eb transparent transparent;
  }
  .text:after{
    top:100%; right:0;
    border-width: .5em 2em 0 0;
    border-color: #212529eb transparent transparent transparent;
  }
  .ribbon:after, .bold:before{
    top:0.5em;right:-1em;
    border-width: 1.1em 1em 1.1em 2em;
    border-color:#2125299c transparent #2125299c #2125299c;
    z-index:-1;
  }