Как сделать такую окантовку на прозрачном тексте?

Question

[Максим]

Добрый день.
Подскажите, как сделать такую цифру.

Делаю цифру прозрачной, она исчезает, добавляю text-shadow цифра становится цветом обводки

<div class="nav__box">
    <div class="nav__number">04</div>
  </div>

.nav {
  position: relative;
  &__number {
    position: absolute;
    top: 45px;
    right: 80px;
    font-size: 190px;
    line-height: 170px;
    font-weight: 700;
    color: transparent;
    text-shadow: 0 0 1px #fef,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff,0 0 1px #fff;
    transform: rotate(90deg);
  }
}

https://codepen.io/maximiloi/pen/QYEVgz

Comments

[tyzberd]

еще можно так https://www.html5canvastutorials.com/tutorials/htm...

Answer 1

[RAX7]

Comments

[Максим]

Спасибо получилось.
Но доделав, на код пене верстку.
Глянул через телефон на нее... И не заработала эта цифра.
груздь - печаль

[RAX7]

Максим, что за ось и браузер? скинь что получилось.

[Максим]

на адроиде и ios смотрел

spoiler

[RAX7]

Максим, может просто съезжает за пределы экрана. У меня в хроме и лисе на адроиде все норм.

chrome 71

добавь еще

.nav__number {
    line-height: 0;
  }

проще будет позиционировать цифру.

[RAX7]

Максим, https://codepen.io/anon/pen/pGNKVv

spoiler

[Максим]

RAX7, спасибо