Пытался реализовать закругленные внутрь углы при помощи CSS.
Как убрать лесенку при использовании radial-gradient ? Получается не очень аккуратно.
https://jsfiddle.net/utLzvs46/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>logo</title>
</head>
<body>
<div class="block">
VEGETARIAN<br>& VEGAN
<button>FULL MENU</button>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,700;1,400&display=swap');
.block {
font-family: 'PT Sans', sans-serif;
font-size: 38px;
font-weight: 700;
letter-spacing: 3px;
line-height: 1.2;
box-sizing: border-box;
padding: 30px;
width: 372px;
height: 206px;
text-align: center;
background: radial-gradient(circle at 30px 30px, transparent 30px, white 30px) -30px -30px;
}
body {
background: black;
}
button {
width: 140px;
height: 30px;
background: #f1ac11;
font-size: 12px;
font-weight: 400;
border-radius: 4px;
border: none;
}
Простой
Простой
