Untitled

dabblet.css

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.container {
	font-family: "helvetica neue", helvetica, sans-serif;
	font-weight: 200;
	font-size: 30px;
	top: 40px;
	height: 300px;
	width: 400px;
	margin-top: 50px;
	position: relative;
	background: #f2f2f2;
	box-shadow: inset 0px 12px 19px -18px #000;
	padding: 22px;
}

.wrapper {
	margin-left:-9px;
	position: absolute;
	top: -15px;
	left: 30%;
	height: 30px;
	overflow: hidden;
	width: 18px;
    transition: all 200ms ease-in-out;
}

.cornerless {
	left: -6px;
	top: 12px;
    background: #f2f2f2;
    box-shadow: inset -14px 14px 20px -21px #000;
    width: 30px;
    height: 30px;
    padding:10px;
    position:relative;
    transform: rotate(-45deg);
    transition: all 200ms ease-in-out;
}

.container:hover .wrapper {
	margin-left: 0px;
	width: 0px;
	height: 15px;
}

.container:hover .wrapper .cornerless {
	left: -15px;
	top: 22px;
}

dabblet.html

<div class="container">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
<div class="wrapper">
<div class="cornerless">
</div>
</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}