Ghost

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>
#ghost-thread{
  width: 400px;
  height: 570px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  background: #F1EAF5;
  border: 0.5px solid #c799dd;
  outline: 15px solid #F1EAF5;
}

#ghost-thread ::-webkit-scrollbar {
  width: 6px;
  border-radius: 50px;
}

#ghost-thread ::-webkit-scrollbar-track {
  background: #c799dd;
  border: 2.5px solid #fff;
}

#ghost-thread ::-webkit-scrollbar-thumb {
  background: #fff;
  border-top: 0.5px solid #40dad2;
  border-bottom: 0.5px solid #40dad2;
}

#ghost-thread .base{
  width: 204px;
  height: 250px;
  background: #fff;
  position: absolute;
  bottom: 71px;
  right: -320px;
  overflow: auto;
  padding-right: 15px;
  border: 50px solid #fff;
  border-bottom: 70px solid #fff;
  outline: 1px solid #c799dd;
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0px;
  color: #555;
  transition: 0.7s ease-in 0s;
  -webkit-transition: 0.7s ease-in 0s;
}
#ghost-thread:hover .base{
  right: 40px;
}
#ghost-thread .base b{
  font-family: 'Courier';
  text-transform: uppercase;
  font-size: 9px;
  font-weight: bold;
  color: #40dad2;
}

#ghost-thread .triangle{
  width: 250px;
  height: 250px;
  border: 0.5px solid #c799dd;
  transform: rotate(45deg);
  position: absolute;
  top: -130px;
  left: 75px;
  background: #F1EAF5;
  transition: 0.7s ease-in 0s;
  -webkit-transition: 0.7s ease-in 0s;
}
#ghost-thread:hover .triangle{
  top: -230px;
  background: #fff;
}

#ghost-thread .triangle2{
  width: 250px;
  height: 250px;
  border: 0.5px solid #c799dd;
  transform: rotate(45deg);
  position: absolute;
  bottom: -130px;
  left: 75px;
  background: #F1EAF5;
  transition: 0.7s ease-in 0s;
  -webkit-transition: 0.7s ease-in 0s;
}
#ghost-thread:hover .triangle2{
  bottom: -310px;
  background: #fff;
}

#ghost-thread .icon{
  border: 0.5px solid #c799dd;
  transform: rotate(45deg);
  position: absolute;
  bottom: 180px;
  left: 95px;
  background: #fff;
  transition: 0.7s ease-in 0s;
  -webkit-transition: 0.7s ease-in 0s;
}
#ghost-thread .icon img{
  width: 190px;
  height: 190px;
  transition: 0.7s ease-in 0s;
  -webkit-transition: 0.7s ease-in 0s;
  padding: 10px;
}
#ghost-thread:hover .icon{
  bottom: 29px;
  left: 155px;
  transform: rotate(-45deg);
}
#ghost-thread:hover .icon img{
  width: 70px;
  height: 70px;
  padding: 7px;
}

#ghost-thread .title{
  width: 400px;
  height: 50px;
  position: absolute;
  top: 92px;
  left: 0px;
  font-family: 'Courier';
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0px;
  line-height: 13px;
  color: #9866AF;
  opacity: 0;
  transition: 0.3s ease-in 0s;
  -webkit-transition: 0.3s ease-in 0s;
}
#ghost-thread:hover .title{
  opacity: 1;
  transition: 0.3s ease-in 0.7s;
  -webkit-transition: 0.3s ease-in 0.7s;
}

#ghost-thread a{
  text-decoration: none;
  color: #9866AF;
}

</style>

<div id='ghost-thread'>

  <div class='triangle'></div>

  <div class='triangle2'></div>

  <div class='title'><b>Tags:</b> # put some tags here #</div>

  <div class='base'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec fringilla leo. Nunc a convallis velit, cursus dictum nibh. Cras et placerat risus. Aliquam dolor purus, finibus eget odio non, tristique scelerisque urna. Aenean a orci aliquam, pellentesque arcu non, lobortis enim. In vulputate id nisi et bibendum. Aliquam sapien eros, venenatis tristique lectus et, hendrerit porta neque. Quisque a sem eget sem ultrices interdum vel quis nibh. Aliquam erat volutpat. Nulla vel turpis tincidunt justo pharetra venenatis. Aenean eget gravida nulla. Etiam varius pulvinar eros, efficitur gravida nibh euismod ut. Sed vitae molestie turpis.
      <p>
      Duis eros ex, mollis eget mi in, eleifend aliquet felis. Vestibulum id libero velit. Morbi vel nisl velit. Mauris urna metus, faucibus eget consectetur eu, elementum in libero. Integer congue magna vitae tempor condimentum. Phasellus urna tellus, auctor tempor sem nec, pretium bibendum dui. Praesent vel nunc efficitur, hendrerit tortor ut, dictum velit. Vivamus blandit leo lacus. Nulla vitae imperdiet libero. Quisque volutpat dui arcu, at interdum urna ullamcorper nec. Proin rhoncus ligula in mauris convallis tincidunt. Nulla sollicitudin pulvinar vulputate. Morbi laoreet, est quis convallis lacinia, ipsum dui suscipit libero, at malesuada ligula mauris sit amet diam. Cras consectetur nunc a arcu pretium, ac aliquet neque elementum.
     <p>
      Aenean tincidunt consequat ipsum, at placerat dui. Donec ante est, ornare id diam vitae, posuere tempor est. Sed congue nisl euismod ligula auctor, nec interdum elit luctus. In a libero et odio iaculis fermentum. Suspendisse auctor nisi ac ante lobortis, eget luctus risus venenatis. Maecenas erat tellus, rutrum in purus quis, molestie finibus elit. Sed aliquam varius nunc sed cursus. Sed eget nisi commodo, convallis risus sed, luctus ligula. Nulla facilisi. Aliquam vulputate iaculis nibh, at pharetra augue ullamcorper at.
      <p>
      Duis eros ex, mollis eget mi in, eleifend aliquet felis. Vestibulum id libero velit. Morbi vel nisl velit. Mauris urna metus, faucibus eget consectetur eu, elementum in libero. Integer congue magna vitae tempor condimentum. Phasellus urna tellus, auctor tempor sem nec, pretium bibendum dui. Praesent vel nunc efficitur, hendrerit tortor ut, dictum velit. Vivamus blandit leo lacus. Nulla vitae imperdiet libero. Quisque volutpat dui arcu, at interdum urna ullamcorper nec. Proin rhoncus ligula in mauris convallis tincidunt. Nulla sollicitudin pulvinar vulputate. Morbi laoreet, est quis convallis lacinia, ipsum dui suscipit libero, at malesuada ligula mauris sit amet diam. Cras consectetur nunc a arcu pretium, ac aliquet neque elementum.
  </div>

  <div class='icon'>
    <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
    <img src="https://i.imgur.com/Cp9KbHo.gif"></a>
  </div>

</div>