/jsbin.aqalurI.css

## jsbin.aqalurI.css
#container{
  margin-top:20px;
  width:200px;
  border:1px solid white;
}

.half{
  width:50%;
  border:1px solid white;
  float:left;
  position:relative;
}

.right{

}


.slant{
  position:absolute;
  width:0;
  height:0;
  z-index:100

}

.slant-left{
  right:-10px;
  top:0;
  border-left:20px solid transparent;
  border-top: 30px solid white;
}

.slant-right{
  left:-10px;
  top:0;
  border-right:20px solid transparent;
  border-top: 30px solid white;
  filter: drop-shadow(9px 9px 9px 9px rgba(0,0,0,0.3))
}

.slant-right-attempt{
  height:60px;
  width:60px;
  border: 1px solid red;
  position:absolute;
  bottom:10px;
  right:-30px;
  transform: rotate(45deg);
  box-shadow: 10px 10px 10px 10px grey

}

p{
  margin:5px 10px
}

.active{
  font-weight:bold;
  background-color:white
}

## jsbin.aqalurI.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="container" class="right-active">

    <div id="left" class="left half active">
      <p>Textuality</p>
      <div id="slant-left" class="slant slant-left">
      </div>
    </div>

    <div id="right" class="right half">
      <p>Toxomity</p>
      <div id="slant-right" class="slant slant-right">

      </div>
    </div>


  </div>
</body>
</html>

## jsbin.aqalurI.js
$(document).ready(function(){
  $('.slant-left').hide();
});

$('#container').click(function(){
  if ($(this).hasClass('right-active')){
    $(this).toggleClass('right-active', 'left-active');
    $('.half').toggleClass('active');
      $('.slant-left').show();
      $('.slant-right').hide();

  } else{
        $(this).toggleClass('right-active', 'left-active');
      $('.slant-right').show();
      $('.slant-left').hide();
      $('.half').toggleClass('active');

  }
  });
	#container{
	margin-top:20px;
	width:200px;
	border:1px solid white;
	}

	.half{
	width:50%;
	border:1px solid white;
	float:left;
	position:relative;
	}

	.right{

	}


	.slant{
	position:absolute;
	width:0;
	height:0;
	z-index:100

	}

	.slant-left{
	right:-10px;
	top:0;
	border-left:20px solid transparent;
	border-top: 30px solid white;
	}

	.slant-right{
	left:-10px;
	top:0;
	border-right:20px solid transparent;
	border-top: 30px solid white;
	filter: drop-shadow(9px 9px 9px 9px rgba(0,0,0,0.3))
	}

	.slant-right-attempt{
	height:60px;
	width:60px;
	border: 1px solid red;
	position:absolute;
	bottom:10px;
	right:-30px;
	transform: rotate(45deg);
	box-shadow: 10px 10px 10px 10px grey

	}

	p{
	margin:5px 10px
	}

	.active{
	font-weight:bold;
	background-color:white
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="container" class="right-active">

	<div id="left" class="left half active">
	<p>Textuality</p>
	<div id="slant-left" class="slant slant-left">
	</div>
	</div>

	<div id="right" class="right half">
	<p>Toxomity</p>
	<div id="slant-right" class="slant slant-right">

	</div>
	</div>


	</div>
	</body>
	</html>
	$(document).ready(function(){
	$('.slant-left').hide();
	});

	$('#container').click(function(){
	if ($(this).hasClass('right-active')){
	$(this).toggleClass('right-active', 'left-active');
	$('.half').toggleClass('active');
	$('.slant-left').show();
	$('.slant-right').hide();

	} else{
	$(this).toggleClass('right-active', 'left-active');
	$('.slant-right').show();
	$('.slant-left').hide();
	$('.half').toggleClass('active');

	}
	});