I need to impose such a house, and what could be set in%, say the height of the block with the gradient and it was set to this height, all I have is the gray frame of the house in .png and the gradient in the form:

'background-image: linear-gradient(51deg, #009f4d 0%, #97d700 100%);'

I tried to insert a picture and using the z-index to push the gradient under the picture, but it shoves instead of the background and not instead of the gray border of the house. Tell me how this can be implemented using HTML + CSS. Thank.


one]

  • one
    Show me how I tried to implement .... - Air
  • With png you need to invert it, i.e. the house itself should be a transparent hole. - Artem Gorlachev

1 answer 1

Of course, such things are most likely elegantly done on svg, but with proper skill, you can make it on good old CSS. Play with your size and adaptability yourself:

 .domik { margin: 120px 0 0 30px; width: 200px; padding: 20px; background: linear-gradient(51deg, #009f4d 0%, #97d700 100%); border-radius: 30px; position: relative; } .domik:before, .domik:after { content: ''; display: block; position: absolute; transform: rotate(45deg); left: 0; right: 0; margin: auto; } .domik:before { border: 20px solid silver; border-radius: 30px; width: 147px; height: 147px; top: -63px; z-index: -1; } .domik:after { background-color: white; width: 145px; height: 145px; border-radius: 10px; top: -45px; } .inner { height: 150px; border-radius: 10px; background-color: white; position: relative; z-index: 1; text-align: center; box-sizing: border-box; padding-top: 35px; } .inner b { font-size: 38px; } .inner:before, .inner:after { content: ''; display: block; position: absolute; top: -30px; width: 27px; height: 16px; } .inner:before { transform: skewX(-45deg); background-color: #47b928; } .inner:after { transform: skewX(45deg); background-color: #89d107; right: 0; } 
 <div class="domik"> <div class="inner"> <b>72.09%</b><br /> Remaining equity </div> </div>

  • Tell me the principle of how to do it on SVG? - Dima Svobodin
  • @ DimaSvobodin, I do not speak svg, unfortunately - humster_spb