Help please draw a check mark on the picture. I know that this can be done with linear-gradient() , it’s something like this

 div { width: 270px; height: 270px; background-image: linear-gradient(230deg, #000 17px, transparent 12px), linear-gradient(310deg, #000 17px, transparent 12px); background-repeat: no-repeat; background-size: 30px 30px; } 
  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div></div> </body> </html>

But how to add white stripes?

Picture with a flag

    1 answer 1

     .b-picture{ background: url('https://s3-media2.fl.yelpcdn.com/bphoto/WxoUgse8zWBhqaUKnC7s9w/ls.jpg') no-repeat 0 0; width: 150px; height: 150px; position: relative; } .b-ribbon{ position: absolute; bottom: 15px; right: 0; width: 40px; height: 60px; overflow: hidden; } .b-ribbon:before, .b-ribbon:after{ content: ''; position: absolute; right: -10px; background: #c00; width: 40px; height: 30px; -webkit-transition: 0.3s; transition: 0.3s; } .b-ribbon:before{ top: 0; -webkit-transform: skew(35deg); transform: skew(35deg); } .b-ribbon:after{ top: 30px; -webkit-transform: skew(-35deg); transform: skew(-35deg); } .b-ribbon > span{} .b-ribbon > span:before, .b-ribbon > span:after{ content: ''; position: absolute; right: -7px; width:100%; height: 4px; background: #fff; z-index: 1; } .b-ribbon > span:before{ top: 10px; -webkit-transform: skew(35deg); transform: skew(35deg); } .b-ribbon > span:after{ bottom: 10px; -webkit-transform: skew(-35deg); transform: skew(-35deg); } .b-ribbon:hover:before, .b-ribbon:hover:after{ background: #00f; } 
     <div class="b-picture"> <div class="b-ribbon"><span></span></div> </div>