Чтобы создать выпуклую границу и вписать в нее кнопку, вы можете использовать псевдоэлемент `::after` или `::before` вашего контейнера. Я покажу пример на чистом CSS, который вы сможете легко перевести в SASS. Предполагается, что кнопка имеет класс `.button` для стилизации.
HTML структура:
```html
<div class="card">
<div class="name">Имя</div>
<div class="second-text">Дополнительный текст</div>
<a class="button" href="#">Кнопка</a>
</div>
```
CSS стили:
```css
.card {
position: relative;
background-color: #E3E8EF;
border-radius: 20px;
padding: 20px; /* Добавил padding для внутреннего контента */
/* Прочие стили карточки */
}
.card::after {
content: "";
position: absolute;
bottom: -20px; /* Выступ границы и кнопки */
right: -20px; /* Выступ границы и кнопки */
width: 60px; /* Ширина выпуклости и кнопки */
height: 60px; /* Высота выпуклости и кнопки */
background-color: #E3E8EF;
border-radius: 0 20px 0 20px; /* Скругления, чтобы создать выпуклость */
z-index: 1;
/* Дополнительные стили границы */
}
.button {
position: absolute;
bottom: -10px; /* Позиционирование кнопки */
right: -10px; /* Позиционирование кнопки */
width: 40px; /* Размеры кнопки */
height: 40px; /* Размеры кнопки */
background-color: blue; /* Цвет кнопки */
border-radius: 20px; /* Скругление кнопки */
z-index: 2; /* Чтобы кнопка была поверх ::after */
/* Прочие стили кнопки */
display: flex;
align-items: center;
justify-content: center;
color: white; /* Цвет текста кнопки */
text-decoration: none; /* Убрать подчеркивание текста ссылки */
/* Добавление тени, если нужно */
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/* Добавим стили для текста в карточке */
/* Я не стал копировать ваш текущий код SASS для .name и .second-text, */
/* так как это не влияет на решение по созданию выпуклой границы с кнопкой. */
```
Этот пример создаст выпуклый правый нижний угол для карточки с помощью псевдоэлемента `::after` и поместит в него кнопку с классом `.button`. С помощью `z-index` вы можете управлять порядком наложения элементов, чтобы кнопка располагалась поверх выпуклой части.
В SASS ваш пример будет выглядеть примерно так:
```sass
.card
position: relative
background-color: #E3E8EF
border-radius: 20px
padding: 20px
&::after
content: ""
position: absolute
bottom: -20px
right: -20px
width: 60px
height: 60px
background-color: #E3E8EF
border-radius: 0 20px 0 20px
z-index: 1
.button
position: absolute
bottom: -10px
right: -10px
width: 40px
height: 40px
background-color: blue
border-radius: 20px
z-index: 2
display: flex
align-items: center
justify-content: center
