<div id="box">
  <p clas="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet ultricies lorem, vitae finibus urna. Nulla et interdum eros. Aliquam ut arcu ut turpis dignissim sagittis at et velit. Fusce vestibulum libero pretium nisl egestas scelerisque. Etiam at enim ultricies, tincidunt purus vel, dapibus odio. Quisque tincidunt nisl nec malesuada gravida. In non arcu odio. Sed lectus lorem, suscipit at enim non, bibendum tempus ligula. Fusce ultrices ut urna quis mattis. Suspendisse turpis elit, interdum id viverra at, facilisis eget ante. Duis euismod tellus tortor, a varius eros pellentesque nec. Vestibulum condimentum elit a justo porta posuere. Aliquam pretium at quam ut tempor. Vivamus sagittis sollicitudin nunc, in vestibulum tortor tincidunt id.
  </p>
</div>
body {
  background: #ddd;
}

#box {
  position: relative;
  width: 300px;
  top: 120px;
  transform: translateX(130%);
  text-align: justify;
  padding: 20px;
  background: #eee;
}

#box:before {
  position: absolute;
  content: "hello ::before";
  background: #5E35B1;
  color: #fff;
  width: 50px;
  height: 30px;
  transform: rotate(45deg);
  text-align: center;
  text-transform: uppercase;
  font-family: arial;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 30px 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.