<div class="card">
  <div class="tr"></div>
  <div class="tl"></div>
  <div class="br"></div>
  <div class="bl"></div>
  Sharp corners
</div>

$foreground: #fff;
$background: #22252C; // Change me
$cornerSize: 30px; // Change me

body{
  background-color: $background;
}

.card{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  color: $background;
  text-shadow: inset 1px 1px 1px darken($background, 10%);
  font-size: 20px;
  text-transform: uppercase;
  background-color: $foreground;
  
  // Enable background image if you want
  background-image: url(http://unsplash.it/700?image=10);
  background-size: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  
  .tl, .tr, .bl, .br{
    width: 0; 
    height: 0;
    position: absolute;
    border-color: $background;
  }
  .tl{
    top: -1px;
    left: -1px;
    border-top: $cornerSize solid $background; 
    border-right: $cornerSize solid transparent;
    // Add corner fold
    box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  }
  .tr{
    top: -1px;
    right: -1px;
    border-top: $cornerSize solid $background; 
    border-left: $cornerSize solid transparent;
  }
  .bl{
    bottom: -1px; 
    left: -1px; 
    border-bottom: $cornerSize solid $background; 
    border-right: $cornerSize solid transparent; 
  }
  .br{
    bottom: -1px;
    right: -1px;
    border-bottom: $cornerSize solid $background; 
    border-left: $cornerSize solid transparent;
  }
}