Сверстать прямоугольник с углом html+css
Подскажите пожалуйста, как с помощью css можно сверстать вот такой прямоугольник с закругленным углом на одной стороне?
Источник: Stack Overflow на русском
Ответы
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>svg</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800px" height="600px" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:1" fill="url(#linear-gradient)" d="M -0.5,-0.5 C 266.167,-0.5 532.833,-0.5 799.5,-0.5C 799.5,81.1667 799.5,162.833 799.5,244.5C 798.083,240.58 795.416,237.747 791.5,236C 554.833,235.333 318.167,235.333 81.5,236C 76.6986,236.984 72.5319,239.15 69,242.5C 48.6667,269.833 28.3333,297.167 8,324.5C 2.46605,331.58 2.13272,338.913 7,346.5C 27.7186,373.551 48.0519,400.885 68,428.5C 71.2933,431.787 75.1266,434.287 79.5,436C 317.167,436.667 554.833,436.667 792.5,436C 795.677,433.783 798.011,430.95 799.5,427.5C 799.5,484.833 799.5,542.167 799.5,599.5C 532.833,599.5 266.167,599.5 -0.5,599.5C -0.5,399.5 -0.5,199.5 -0.5,-0.5 Z"/></g>
<g><path fill="url(#linear-gradient)" stroke="url(#linear-gradient-stroke)" stroke-width="5" d="M 799.5,244.5 C 799.5,305.5 799.5,366.5 799.5,427.5C 798.011,430.95 795.677,433.783 792.5,436C 554.833,436.667 317.167,436.667 79.5,436C 75.1266,434.287 71.2933,431.787 68,428.5C 48.0519,400.885 27.7186,373.551 7,346.5C 2.13272,338.913 2.46605,331.58 8,324.5C 28.3333,297.167 48.6667,269.833 69,242.5C 72.5319,239.15 76.6986,236.984 81.5,236C 318.167,235.333 554.833,235.333 791.5,236C 795.416,237.747 798.083,240.58 799.5,244.5 Z"/></g>
<linearGradient id="linear-gradient">
<stop offset="0%" stop-color="darkviolet"/>
<stop offset="100%" stop-color="aqua"/>
</linearGradient>
<linearGradient id="linear-gradient-stroke">
<stop offset="0%" stop-color="blueviolet"/>
<stop offset="100%" stop-color="aqua"/>
</linearGradient>
</svg>
</body>
</html>