Skip to content

Instantly share code, notes, and snippets.

Created December 13, 2013 12:53
Show Gist options
  • Save anonymous/7943823 to your computer and use it in GitHub Desktop.
Save anonymous/7943823 to your computer and use it in GitHub Desktop.
#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');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment