Подскажите, как сделать такой вырез как на картинке

Question

вырез справа сверху,используя css, помогите плз

Answer 1

Самый топорный и простой вариант это создать такую кнопку в графическом редакторе и использовать ее изображение как <img> или вставить через css как свойство background.

Второй вариант - вам нужно создать маску в программе для дизайна, сохранить как svg и наложить на пустой div.

#svg_button{
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    padding: 25px;
    color: black;
    font-family: "Roboto Light", sans-serif;
    width: 300px;
    height: 300px;

    background-color: #00FD95;
    mask: url(#mask_0);
}

#header{
    font-size: 32px;
    font-weight: bold;
}

#description{
    font-size: 24px;
}

<div id="svg_button">
    <span id="header">Подскажите</span>
    <span id="description">Как сделать такой вырез как на картинке</span>
</div>

<svg viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" fill="none" customFrame="#000000">
    <defs>
        <filter id="pixso_custom_mask_type_alpha">
            <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0 " />
        </filter>
    </defs>
    <mask id="mask_0" width="300.000000" height="300.000000" x="0.000000" y="0.000000" maskUnits="userSpaceOnUse">
        <g filter="url(#pixso_custom_mask_type_alpha)">
            <path id="Слияние" d="M25 0L220.406 0C230.869 0 238 14.0377 238 24.5C238 45.2107 254.789 62 275.5 62C285.962 62 300 69.1314 300 79.5936L300 275C300 288.807 288.807 300 275 300L25 300C11.1929 300 0 288.807 0 275L0 25C0 11.1929 11.1929 0 25 0ZM300 25C300 11.1929 288.807 0 275 0C261.193 0 250 11.1929 250 25C250 38.8071 261.193 50 275 50C288.807 50 300 38.8071 300 25Z" fill="rgb(0,0,0)" fill-rule="evenodd" />
        </g>
    </mask>
</svg>

БЛОГ НА HUSL

Подскажите, как сделать такой вырез как на картинке

Ответы (1 шт):