<section>
  <div class="circle">
    <svg class="svg">
      <defs>
        <linearGradient id="grad">
          <stop offset="0" stop-color="gold" stop-opacity="0" />
          <stop offset="1" stop-color="red" />
        </linearGradient>

        <mask id="mask">
          <rect x="-10%" y="-10%" width="120%" height="120%" fill="#fff" />
          <g fill="#000">
            <circle cx="85.3553390%" cy="14.644660%" r="25"/>
            <circle cx="100%" cy="50%" r="25"/>
            <circle cx="85.3553390%" cy="85.3553390%" r="25"/>
          </g>
        </mask>
      </defs>

      <circle mask="url(#mask)" cx="50%" cy="50%" r="50%" stroke="url(#grad)" stroke-width="10" fill="none"/>
    </svg>

    <ul class="content">
      <li class="content__item">
        <div class="content__number">1</div>
        <div class="content__text">Lorem ipsum dolor sit amet consectetur adipisicing elit</div>
      </li>
      <li class="content__item">
        <div class="content__number">2</div>
        <div class="content__text">Sapiente, saepe. Assumenda enim cum ipsam veniam voluptatum, dolorem aliquam</div>
      </li>
      <li class="content__item">
        <div class="content__number">3</div>
        <div class="content__text">Assumenda enim cum ipsam veniam voluptatum, dolorem aliquam earum est</div>
      </li>
    </ul>
  </div>
</section>
*,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
}

section {
  padding: 50px;
  overflow: hidden;
  background: url("https://images.unsplash.com/photo-1509670161296-18d69c8f2ffd?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80")
    no-repeat center / cover;
}

.circle {
  position: relative;
  width: 50%;
  transform: translate(-25%, 0);
}

.circle::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.svg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: visible;
}

.content {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  $root: &;

  &__item {
    width: 100%;
    transform-origin: 0 0;
    position: absolute;
    top: 50%;
    left: 50%;

    &:nth-child(1) {
      transform: rotate(-45deg) translate(50%, -50%);

      #{$root}__number {
        transform: translate(-50%, -50%) rotate(45deg);
      }

      #{$root}__text {
        transform: rotate(45deg);
      }
    }

    &:nth-child(2) {
      transform: rotate(0deg) translate(50%, -50%);

      #{$root}__number {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      #{$root}__text {
        transform: rotate(0deg);
      }
    }

    &:nth-child(3) {
      transform: rotate(45deg) translate(50%, -50%);

      #{$root}__number {
        transform: translate(-50%, -50%) rotate(-45deg);
      }

      #{$root}__text {
        transform: rotate(-45deg);
      }
    }
  }

  &__number {
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    background-color: #673ab7;
    color: #fff;
  }

  &__text {
    padding-left: 40px;
    transform-origin: 0 50%;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.