Обрезанная рамка с фоном

16 января 2020, 18:40

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

Answer 1

<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>

Answer 2

.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>