CSS Triangles

dabblet.css

/**
 * CSS Triangles
 */

body {
	margin: 20px;
}

.shape {
	width: 0;
	height: 0;
	margin: 1em;
	display: inline-block;
}

.down {
	border: 10px transparent solid;
	border-top: 10px #333 solid;
	border-bottom: 0px transparent solid;
}

.up {
	border: 10px transparent solid;
	border-top: 0px transparent solid;
	border-bottom: 10px #333 solid;
}

.left {
	border: 10px transparent solid;
	border-left: 10px #333 solid;
	border-right: 0px transparent solid;
}

.right {
	border: 10px transparent solid;
	border-right: 10px #333 solid;
	border-left: 0px transparent solid;
}

.dialogue {
	border: 1px #333 solid;
	padding: 5px;
	display: inline;
	position: relative;
}

.dialogue.up:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: 10px transparent solid;
	border-top: 0px transparent solid;
	border-bottom: 10px #333 solid;
	left: 40%;
	top: -35%;
}

.dialogue.down:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: 10px transparent solid;
	border-bottom: 0px transparent solid;
	border-top: 10px #333 solid;
	left: 40%;
	top: 100%;
}

.dialogue.left {
	margin-left: 0.5em;
}

.dialogue.left:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: 10px transparent solid;
	border-right: 10px #333 solid;
	border-left: 0px transparent solid;
	left: -14%;
	top: 18%;
}

.dialogue.right:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border: 10px transparent solid;
	border-left: 10px #333 solid;
	border-right: 0px transparent solid;
	left: 100%;
	top: 18%;
}

.diagram {
	border-top: red 2em solid;
	border-bottom: green 2em solid;
	border-left: blue 2em solid;
	border-right: orange 2em solid;
}

dabblet.html

<h2>Arrows</h2>
<div class="shape down"></div>
<div class="shape up"></div>
<div class="shape left"></div>
<div class="shape right"></div>
<h2>Dialogues</h2>
<div class="dialogue up" contenteditable>123456789</div>
<div class="dialogue down" contenteditable>123456789</div>
<div class="dialogue left" contenteditable>123456789</div>
<div class="dialogue right" contenteditable>123456789</div>
<h2>Diagram</h2>
<div class="shape diagram"></div>

dabblet.js

// alert('Hello world!');

settings.json

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