0

Возникла проблема с рамкой. Раньше использовал простой :after и ставил тексту фон, тут же на фоне картинка, и такой вариант не прокатывает. Как это можно реализовать?введите сюда описание изображения

1

2 ответа 2

0
<div class="header-inner-contacts">
                <div class="contacts">
                    <p class="contacts__title">
                        Работаем без выходных по Минску и обл.
                    </p>
                    <div class="contacts-phone">
                        <div class="contacts-phone__num">
                            <span class="icon-Phones"></span>
                            <a href="+375291936245">+375 29 193 62 45</a>
                        </div>
                        <p class="contacts-phone__recall">
                            Перезвоните мне
                        </p>
                    </div>
                </div>
            </div>
<style>
.header-inner-contacts {
  width: 19.607%;
  align-self: flex-start;
  margin-top: 2.5rem;
}
.header-inner-contacts .contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contacts__title {
  font-size: 1.4rem;
  color: #999999;
  font-family: Montserrat, sans-serif;
}

.contacts-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
}
.contacts-phone__num {
  background-color: #2b2b2c;
  padding: 0 1.4rem;
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
.contacts-phone__num span {
  font-size: 2.5rem;
  color: #ffc009;
}
.contacts-phone__num a {
  font-size: 2.4rem;
  color: #ffffff;
  margin-left: 0.5rem;
}
.contacts-phone__recall {
  color: #ffc009;
  margin-top: 0.6rem;
  font-size: 1.4rem;
  border-bottom: 1px solid #ffc009;
}
.contacts-phone:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #545455;
  top: 2rem;
}
</style>
3
  • Не пойму вашего вопроса. Вам собрать что-то нужно? Уточните конкретнее. 10 апр 2019 в 9:05
  • @VladimirRodichev нужно сделать так, чтобы текст перекрывал рамку делая её прерывистой
    – SimaDmtr
    10 апр 2019 в 9:13
  • prntscr.com/n9ypaf покажите стрелочками визуально что нужно. я не понимать. 10 апр 2019 в 9:18
0

.header-inner-contacts {
  align-self: flex-start;
  margin-top: 2.5rem;
}
.header-inner-contacts .contacts {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.contacts__title {
  font-size: 1.4rem;
  color: #999999;
  font-family: Montserrat, sans-serif;
}

.contacts-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}
.contacts-phone__num {
    background-color: #2b2b2c;
    padding: 0 1.4rem;
    /* margin-top: 0.6rem; */
    display: flex;
    align-items: center;
    z-index: 2;
    position: absolute;
    top: -1.2rem;
}
.contacts-phone__num span {
  font-size: 2.5rem;
  color: #ffc009;
}
.contacts-phone__num a {
    font-size: 2.4rem;
    color: #ffffff;
    /* margin-left: 0.5rem; */
    line-height: 1;
}
.contacts-phone__recall {
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #545455;
    box-sizing: border-box;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0;
}
.contacts-phone__recall p {
    color: #ffc009;
    font-size: 1.4rem;
    border-bottom: 1px solid #ffc009;
}
<div class="header-inner-contacts">
                <div class="contacts">
                    <p class="contacts__title">
                        Работаем без выходных по Минску и обл.
                    </p>
                    <div class="contacts-phone">
                        <div class="contacts-phone__num">
                            <span class="icon-Phones"></span>
                            <a href="+375291936245">+375 29 193 62 45</a>
                        </div>
                        <div class="contacts-phone__recall"><p>
                            Перезвоните мне
                        </p></div>
                    </div>
                </div>
            </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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