Обводка текста вокруг картинки [CSS]

Question

Помогите пожалуйста, нужно сделать так что бы текст был вокруг картинки, никогда просто такого не делал. Вот код html что есть:

      <div class="dream__arrow">
        <div class="dream__arrow-rectangle">
          <div class="dream__arrow-content">
            <span class="dream__arrow-text">Discover Your dream Property✨</span>
          </div>
          <a href="/" class="dream__arrow-link">
            <img src="/SectionDream/arrow.svg" alt="arrow image" class="dream__arrow-img">
          </a>
        </div>
      </div>

Так же сам скриншот как должны выглядить -

Answer 1

Можна проще... С возможностью замены текста. Если понимать как оно должно работать.

var Emblem = {
  init: function(el, str) {
    var element = document.querySelector(el);
    var text = str ? str : element.innerHTML;
    element.innerHTML = '';
    for (var i = 0; i < text.length; i++) {
      var letter = text[i];
      var span = document.createElement('span');
      var node = document.createTextNode(letter);
      var r = (360/text.length)*(i);
      var x = (Math.PI/text.length).toFixed(0) * (i);
      var y = (Math.PI/text.length).toFixed(0) * (i);
      span.appendChild(node);
      span.style.webkitTransform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';
      span.style.transform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';
      element.appendChild(span);
    }
  }
};

Emblem.init('.emblem');

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background-color: #141414;
}

.emblem_wrapper {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 80vh;
  height: 80vh;
}

.emblem {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto;
  width: 80vh;
  height: 80vh;

  border-radius: 50%;
  text-align: center;
  background-color: #141414;
  color: #fff;
  border: 1px solid #252525;
  animation: spinZ 20s linear infinite;

}

.emblem>span {
  position: absolute;
  display: inline-block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 6vh;
  padding: 4vh;
  transition: all .5s cubic-bezier(0, 0, 0, 1);
}

.emblem_arrow__wrapper {
  width: 50vh;
  height: 50vh;
  background-color: #191919;
  border-radius: 50%;
  border: 1px solid #252525;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


@keyframes spinZ {
  0% {
    transform: rotateZ(360deg);
  }

  100% {
    transform: rotateZ(0deg);
  }
}

.emblem_arrow__wrapper svg {
  transform: scale(0.3)
}

<a href="/" class="emblem_wrapper" rel="nofollow">
  <div class="dream__arrow-content emblem">Discover Your dream Property✨</div>
  <span class="emblem_arrow__wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32">
      <path d="M0 30.5 1.4 32 29.7 3.7v12.6h2v-15c0-.6-.4-1-1-1h-16v2h13.6L0 30.5z" fill="#fff" /></svg>
  </span>
</a>

БЛОГ НА HUSL

Обводка текста вокруг картинки [CSS]

Ответы (1 шт):