Оберните рекламные объявления Google в поле

Question

Не могли бы вы помочь мне нарисовать окно вокруг объявлений Google, которое я показываю на своем веб-сайте wordpress. Ширина должна быть 100%, а высота должна соответствовать объявлениям (с небольшим количеством отступов) и небольшой тег «Реклама» в верхней левой части.

Буду очень благодарен. Вы можете увидеть образец изображения ниже.

Answer 1

Вот код:

HTML

<div class="add-wrapper"> 
    Your Google Code 
</div> 

CSS должны быть следующие:

.add-wrapper::before { 
    color: #a3a3a3; 
    content: "Advertisement"; 
    font-family: arial; 
    font-size: 14px; 
    height: 150px; 
    left: 12px; 
    letter-spacing: 1px; 
    position: absolute; 
    text-transform: uppercase; 
    top: -2px; 
    transform: rotate(-90deg); 
    width: 130px; 
} 

.add-wrapper { 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
    float: left; 
    min-height: 145px; 
    margin: 35px 0; 
    padding: 0 0 0 20px; 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 

Вот оно