Untitled

dabblet.css

body {
	background:
		linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
		linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
		linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
		
	background-color:#e1ebbd;
	background-size: 128px 128px;
}

.hint {
	display: inline-block;
	vertical-align: top;
	background-color: rgba(255, 0, 0, 0.5);
	border: 3px blue solid;
	border-right: 0 none;
	padding: 50px;
	position: relative;
	margin-right: 50px;
	margin-bottom: 20px;
}

.hint:after {
	content: '';
	position: absolute;
	top: -3px;
	left: 100%;
	width: 3px;
	bottom: -3px;

	background-image: -webkit-linear-gradient(top, blue, blue 26px, transparent 26px, transparent 41px, blue 41px, blue);
	background-image: linear-gradient(180deg, blue, blue 26px, transparent 26px, transparent 41px, blue 41px, blue);
}

.hint:before {
	content: '';
	position: absolute;
	top: 20px;
	left: 100%;

	background: -webkit-linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5) 42%, blue 42%, blue 52%, transparent 52%, transparent),
					-webkit-linear-gradient(-45deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5) 42%, blue 42%, blue 52%, transparent 52%, transparent);


	background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5) 42%, blue 42%, blue 52%, transparent 52%, transparent),
				linear-gradient(135deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5) 42%, blue 42%, blue 52%, transparent 52%, transparent);

	background-position: -10px -10px, -10px 10px;
	background-repeat: no-repeat;

	width: 20px;
	height: 20px;
}

dabblet.html

<div class="hint">Some text</div>

<div class="hint">Some text <br /> Second string</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"all"}