css crop marks

crop marks css

//reversed over black background

.summary__page-title_container{
z-index: 1;
position: relative;
display: block
}

.page__title.summary__page_title{
  position: absolute;
  display: block;
  @include vr($margin: 0, $line-height: 1);
    background: $black;
  border: solid .75em $black;
}

  .summary__page_title:before, .summary__page_title:after {
  position: absolute;
  content: '';
  border: solid $gray-400;
  z-index: -1;
}
.summary__page_title:before {
  top: -1em; bottom: -1em;
  left:-1%; right:-1%;
  border-width: 0 1px;
}
.summary__page_title:after {
  left: -1em; right: -1em;
  top: -10%; bottom: -10% ;
  border-width: 1px 0;
}

crop marks html

<div class="page__title_container summary__page-title_container">
	<h1 class="page__title summary__page_title">What I Do</h1>
</div>