<div class="vertical-text">Вертикальный текст это просто! →</div>
.vertical-text { /* Трансформируем текст */ transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); /* Координаты точки трансформации */ transform-origin: left top 0; -ms-transform-origin: left top 0; -moz-transform-origin: left top 0; -webkit-transform-origin: left top 0; /* Формируем контейнер для текста */ background:#196e76; border:0.25em solid #196e76; box-shadow:inset 0.25em -0.25em 0.5em rgba(0,0,0,0.3), 0.25em -0.25em 0 #444; margin-left: 42px; padding: 10px; /* Стили для текста */ color: #fff; text-transform: uppercase; text-transform: 1px 1px 0px rgba(0, 0, 0, 0.5); float: left; font-family: "Trebuchet MS",Tahoma,Arial,sans-serif; letter-spacing: .01rem; font-size: 20px; line-height: 1; }