All I got is to make her so

.circus{ width: 100px; height: 100px; background-color: #1798D8; border-radius: 50px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: arial; } .circus div:nth-child(1){ font-size: 44px; letter-spacing: 2px; } .circus div:nth-child(2){ font-size: 26px; letter-spacing: normal; } .section-price{ background: aqua; -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 28%); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 25%); display: inline-block; } .section-price-content{ background: white; -webkit-clip-path: polygon(10% 1%, 99% 1%, 99% 99%, 1% 99%, 1% 25%); clip-path: polygon(11% 1%, 99% 1%, 99% 99%, 1% 99%, 1% 26%); display: inline-block; box-sizing: border-box; padding: 15px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/css/normalize.css"> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div class="section-price"> <div class="section-price-content"> <p>Π‘ΠΊΠ°Π·Π°Ρ‡Π½ΠΎΠ΅ заморскоС яство</p> <h2>ΠΡΠΌΡƒΡˆΠΊΠ°</h2> <h3>с Ρ€Ρ‹Π±ΠΎΠΉ</h3> <ul> <li>10 ΠΏΠΎΡ€Ρ†ΠΈΠΉ</li> <li>ΠΌΡ‹ΡˆΡŒ Π² ΠΏΠΎΠ΄Π°Ρ€ΠΎΠΊ</li> </ul> <div class="circus"> <div>0,5</div> <div>ΠΊΠ³</div> </div> </div> </div> </body> </html>

but it should be like this enter image description here

how to put it right? where do you need a cat and how

  • jsfiddle.net/kafd4792/5 just in case - user33274 2:55 pm
  • Comments are not intended for extended discussion; conversation moved to chat . - Qwertiy ♦
  • MMM wanted to eat straight - Alexey Zemtsov

3 answers 3

Second option

 * { margin: 0; padding: 0; } .svg-ramp { width: 250px; } .card { display: inline-block; position: relative; } .content { position: absolute; top: 5%; left: 20%; width: 60%; } .content p { white-space: nowrap; font-size: 80%; } .content h2 { font-size: 180%; } .content ul { transform: scale(.7)translateX(-30px)translateY(18px); white-space: nowrap; LIST-STYLE: NONE; } h3, p { line-height: 24px; transform: translateY(20PX); } .content img { position: absolute; top: 100%; left: 0; transform: translate(-30px, 30px); } .actia { position: absolute; right: 0; top: 100%; background: lightblue; width: 60px; height: 60px; border-radius: 50%; line-height: 18px; text-align: center; color: #fbfbfb; transform: translate(0, 50px); } .actia div { transform: translateY(10px); } 
 <div class="card"> <div class="svg-ramp"> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 116 137"> <g transform="translate(-2,-156)"> <path d="m 15.610355,174.94031 18.89881,-16.63095 H 113.50619 V 290.60103 H 4.2710695 L 3.8930933,185.52364 Z" style="fill:#fff;stroke:#ff8700;stroke-width:3;" /> </g> </svg> </div> <div class="content"> <p>ΠΊΠ°ΠΊΠΎΠ΅ Ρ‚ΠΎ описаниС</p> <h3>НазваниС</h3> <p>с Ρ„ΡƒΠ°-Π³Ρ€Π°</p> <ul> <li>10 ΠΏΠΎΡ€Ρ†ΠΈΠΉ</li> <li>ΠΌΡ‹ΡˆΡŒ Π² ΠΏΠΎΠ΄Π°Ρ€ΠΎΠΊ</li> </ul> <img src="http://pngimg.com/uploads/cat/cat_PNG50434.png" alt="" width="60px"> <div class="actia"> <div>0,5</div> <div>ΠΊΠ³</div> </div> </div> </div>

    But seriously, you need to do something like this.

     div.card { position: relative; height: 900px; width: 520px; border: 8px solid #4497d3; overflow: hidden; border-radius: 0px 20px 20px 20px; -webkit-clip-path: polygon(86px 0, 0 86px, 0 100%, 100% 100%, 100% 0); clip-path: polygon(86px 0, 0 86px, 0 100%, 100% 100%, 100% 0); background-color: white; float: left; color: black; margin: 10px; padding: 30px 20px 20px 80px; } div.card:before { position: absolute; content: ''; left: 0px; z-index: -1; height: calc(86px - 8px * 0.6); width: calc(86px - 8px * 0.6); background-color: #4497d3; top: 0px; -webkit-clip-path: polygon(0 0, 0 100%, 100% 0%); clip-path: polygon(0 0, 0 100%, 100% 0%); } body { background-image: radial-gradient(circle, #464646 0%, #000000 100%); } .z1 { font: 24pt sans-serif; color: #666666; } .z2 { font: 68pt sans-serif; } .z3 { font: 40pt sans-serif; } .z4 { font: 60pt sans-serif; } .z5 { font: 24pt sans-serif; } .cardimg img { max-width: 650px; max-height: 700px; position: absolute; left: 40px; bottom: -120px; z-index: -1; } div.stamp { border-radius: 50%; width: 120px; height: 120px; background-color: #4497d3; position: absolute; right: 20px; bottom: 20px; z-index: -1; color: white; display: inline-block; vertical-align: top; text-align: center; padding: 20px; } 
     <div class="card"> <span class="z1">Π‘ΠΊΠ°Π·ΠΎΡ‡Π½ΠΎΠ΅ заморскоС яство</span><br/> <span class="z2">ΠΡΠΌΡƒΡˆΠΊΠ°</span><br/> <span class="z3">с Ρ„ΡƒΠ° Π³Ρ€Π°</span><br/> </br> <span class="z1">10 ΠΏΠΎΡ€Ρ†ΠΈΠΉ<br/>ΠΌΡ‹ΡˆΡŒ Π² ΠΏΠΎΠ΄Π°Ρ€ΠΎΠΊ</span> <div class="cardimg"><img src="http://pngimg.com/uploads/cat/cat_PNG50434.png" alt=""></div> <div class="stamp"> <span class="z4">0,5</span><br/> <span class="z5">ΠšΠ“</span> </div> </div>

      Like some kind of garbage ..

       *{ margin:0; padding:0; list-style:none; } html,body{ height:100%; background:linear-gradient(135deg,pink 55%, red 20%,blue 100%); } .card{ min-width:460px; max-width:460px; min-height:585px; max-height:585px; overflow:hidden; margin:auto; } .items{ width:90%; height:500px; margin:auto; background:transparent; transform:translateY(40px); border:6px solid blue; border-top:6px solid transparent; border-left:6px solid transparent; position: relative; } .items:after{ content:""; width:0; height:84.5%; position: absolute; left:-5px; top:80px; bottom:0; border:3px solid blue; background:blue; } .items:before{ content:""; width:80%; height:0; position: absolute; right:-4px; top:-5px; border:3px solid blue; background:blue; } .line{ width:120px; height:6px; position: absolute; background:blue; transform:rotate(-45deg)translate(-40px,10px); } .content{ position: absolute; top:10px; bottom:0; width:80%; background:rgba(255,0,0,0); left:12%; text-align:center; text-transform:lowercase; } h1{ text-transform:uppercase; } .img1{ display:block; width:75%; height:250px; position: absolute; bottom:0; left:0; } p, .list{ text-align:left; transform:translateX(40px); } .actia{ width:150px; height:150px; background:lightblue; border-radius:50%; position: absolute; bottom:20px; right:20px; font-size:2em; line-height:40px; font-weight:900; } .actia div{ transform:translateY(35px); } 
       <div class="card"> <div class="items"> <div class="line"></div> <div class="content"> <h2>Какой Ρ‚ΠΎ тСкст </h2> <h1>НазваниС</h1> <p>с Ρ„ΡƒΠ°-Π³Ρ€Π°</p> <ul class="list"> <li>10 ΠΏΠΎΡ€Ρ†ΠΈΠΉ</li> <li>ΠΌΡ‹ΡˆΡŒ Π² ΠΏΠΎΠ΄Π°Ρ€ΠΎΠΊ</li> </ul> <img src="http://pngimg.com/uploads/cat/cat_PNG50517.png" alt="cat" class="img1"> <div class="actia"> <div>0,5</div> <div>ΠΊΠ³</div> </div> </div> </div> </div>