task http://joxi.ru/BA0Lk9PCJYzpVA

When rounding one corner it turns out not what I would like.

.div:before { content: ""; width: 0; height: 0; border: 12px solid; border-color: red transparent transparent red; position: absolute; left: 1px; bottom: -23px; border-radius: 0px 0px 0px 4px; }
  • Do not forget to indicate that I would like to. I also recommend that you formulate the title in such a way that at the end you can put a question mark. - Stalker
  • Thanks for the advice. I will consider - Profet

2 answers 2

If "one to one", then the CSS will be like this:

 body { background: #eee; } .tip { position: relative; width: 400px; min-height: 227px; padding: 10px; border: 1px solid #aaa; margin: 0px auto; box-sizing: border-box; background: rgba(255, 255, 255, 1); } .tip:before { content: ''; position: absolute; width: 189px; height: 144px; bottom: -72px; left: -1px; box-sizing: border-box; border-left: 1px solid #aaa; border-bottom: 1px solid #aaa; border-radius: 0 0 0 44px; transform-origin: center center; transform: skewY(-37deg); background: linear-gradient(37deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%); } 
 <div class="tip"></div>

  • Great, thanks) - Profet

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(.56233 0 0 .53208 88.609 -19.878)"> <path d="m-118.68 213.08c0.16461 21.419 0.32922 42.837 6.6278 43.091 6.2986 0.25345 18.731-20.658 31.163-41.57" fill="#fff" stroke="#000" stroke-width=".33883px"/> <path d="m-118.68 213.08-3e-3 -161.77 286.51 0.75595-1.5119 164.04-247.2-1.5074" fill="#fff" stroke="#000" stroke-width="0.2px"/> <text transform="scale(1.2956 .77182)" x="-22.754932" y="200.21956" fill="#000000" font-family="FontAwesome" font-size="75.577px" letter-spacing="0px" stroke-width="4.0488" word-spacing="0px" style="line-height:101.21985626px"><tspan x="-22.754932" y="200.21956" stroke-width="4"></tspan></text> </g> </svg>