0

введите сюда описание изображения

Убрать border возле иконки и кнопки, как лучше сделать? Может кому-то приходилось делать

 .consultation{
    padding: 55px 0 80px 0;
    &__title{
        color: #3a3a3a;
        font-size: 28px;
        font-weight: 400;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 70px;
    }
    &__form{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border: 1px solid #898989;
        padding: 68px 0 53px 0;
        button{
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
        }
        input{
            padding: 15px 30px;
            border: 1px solid #898989;
            border-radius: 30px;
            margin: 0 2.5px;
            width: 270px;
        }
    }
    &__agent{
        position: absolute;
        padding: 20px;
        border: 1px solid #e93b3b;
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
        top: -50px;
        background: #fff;
    }
    
}



   <form action="#" class="consultation__form">
                            <img src="./img/icons/agentRed.png" alt="agent" class="consultation__agent">
                            <input type="text" name="UserName" placeholder="Ваше имя...">
                            <input type="tel" name="UserPhone" placeholder="Ваш номер телефона...">
                            <input type="email" name="UserEmail" placeholder="Ваш e-mail...">
                            <button type="submit" class="btn btn_f">Отправить заявку</button>

                        </form>
2
  • бордер где? у инпута? или эти 2 серые полоски?
    – Антон
    Commented 25 июн. 2020 в 6:44
  • Хм, написал свой ответ первым, а его удалили и указали, что я сдублировал ответ, который типо уже был. Притом ответить на удаление я не могу. Интересненько.
    – NocteFury
    Commented 25 июн. 2020 в 8:18

3 ответа 3

1

Ну да, если суть в пространствах слева и справа от аватарки,то попробуйте как то так:

.consultation__agent{
     margin-left: 10px;
     margin-right: 10px;
}
1
  • Уже решил,спасибо!
    – Nikita
    Commented 25 июн. 2020 в 7:36
0

Если эти 2 серые полоски то соответственно

border-top: none;
border-bottom: none;

А так глянуть бы на код, и на то чего хотите добиться, а то не совсем понятно

1
  • Добавил код, посмотрите(HTML,SCSS)
    – Nikita
    Commented 25 июн. 2020 в 7:01
0

Добавьте элементам box-shadow с цветом родительского фона.

Аналогичный вопрос и подробный ответ к нему находится тут - Как сделать такие разрывы в border?

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.