Как скопировать вертикальный баннер

Question

Я нашел некоторое решение для вертикального баннера, которое я хотел бы использовать в моем бутстрапе 3 отзывчивого дизайна, но я хотел бы его изменить, и мне нужна помощь, потому что я не понимаю понятия кодирования моего баннер, чтобы выглядеть так.

Это решение, которое я нашел.

CSS и HTML выглядит следующим образом

div { 
 
     background: deeppink; 
 
     height: 30px; 
 
     width: 30px; 
 
     position: relative; 
 
     text-align: center; 
 
     font: 600 16px sans-serif; 
 
     color: #fff; 
 
     line-height: 27px; 
 
     border: 0; 
 
    } 
 
    
 
    div:after { 
 
     content: ""; 
 
     position: absolute; 
 
     bottom: -18px; 
 
     left: 0; 
 
     height: 0; 
 
     width: 0; 
 
     border: solid 15px deeppink; 
 
     border-bottom-color: transparent; 
 
    } 
 
    
 
    div:hover { 
 
     background: purple; 
 
    } 
 
    
 
    div:hover:after { 
 
     border-color: purple; 
 
     border-bottom-color: transparent; 
 
    }

<div> i </div>

Смотрите Fiddle для баннера здесь. Теперь, как я могу изменить этот баннер, чтобы больше блокировать мой баннер, тем более, как я могу сделать заголовок этого примера баннера похожим на изображение. Может кто-нибудь помочь мне сделать это, спасибо.

Answer 1

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
body{ 
 
    padding: 50px; 
 
} 
 
div { 
 
    background: #1589A1; 
 
    padding: 20px; 
 
    position: relative; 
 
    color: #fff; 
 
    width: 100px;  
 
    min-height: 70px; 
 
    font: 600 16px sans-serif; 
 
    color: #fff;  
 
} 
 
div:after { 
 
    content:''; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: -100px; 
 
    border: 50px solid transparent; 
 
    border-top: 50px solid #1589A1; 
 
    -webkit-transform: translate(-50%, 0); 
 
    -ms-transform: translate(-50%, 0); 
 
    transform: translate(-50%, 0); 
 
} 
 
div span{ 
 
    padding: 30px 0 30px; 
 
    position: relative; 
 
    display: block; 
 
    z-index: 1; 
 
    -webkit-transform: rotate(-90deg); 
 
\t -moz-transform: rotate(-90deg); 
 
\t -o-transform: rotate(-90deg); 
 
\t transform: rotate(-90deg); 
 
}

<div> 
 
    <span>solution</span> 
 
    <span>solution</span> 
 
</div>