JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div class="box">
  <div class="box__tl">
    <div class="box__br">
      Journal Name
    </div>
  </div>
</div>

CSS

.box {
  max-width: 400px;
  font-size: 50px;
  text-align: center;
}

.box__tl {
  border-top: 1px solid;
  border-left: 1px solid;
  position: relative;
}

.box__br {
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: translate(40px, 40px);
  padding-bottom: 40px;
  position: relative;
}

.box__tl::before,
.box__br::before {
  content: '';
  display: block;
}

.box__tl::before {
  width: 41px;
  height: 41px;
  float: right;
  transform: translate(40px, -1px);
  background: linear-gradient(to top right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) calc(50% - 0.8px),
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) calc(50% + 0.8px),
    rgba(0,0,0,0) 100%);
}

.box__br::before {
  width: 41px;
  height: 41px;
  position: absolute;
  bottom: 0;
  transform: translate(-41px, 1px);
  background: linear-gradient(to top right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) calc(50% - 0.8px),
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) calc(50% + 0.8px),
    rgba(0,0,0,0) 100%);
}