demircancelebi · April 17, 2015 02:55 · Apr 17, 2015
diff --git a/dabblet.css b/dabblet.css
@@ -0,0 +1,34 @@
+/**
+ * How to make 3-corner-rounded triangle in CSS (SO)
+ * http://stackoverflow.com/q/14446677/1397351
+ */
+.triangle {
+	position: relative;
+	background-color: orange;
+	text-align: left;
+}
+.triangle:before,
+.triangle:after {
+	content: '';
+	position: absolute;
+	background-color: inherit;
+}
+.triangle,
+.triangle:before,
+.triangle:after {
+	width:  10em;
+	height: 10em;
+	border-top-right-radius: 30%;
+}
+
+.triangle {
+	transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
+}
+
+
+
+/* styles below for demonstration purposes only */
+body { padding: 30%; }
+.triangle:hover { background: rgba(0,0,255,.5) }
+.triangle:hover:before { background: rgba(255,0,0,.5) }
+.triangle:hover:after { background: rgba(255,255,0,.5) }
diff --git a/dabblet.html b/dabblet.html
@@ -0,0 +1,2 @@
+<!-- content to be placed inside <body>…</body> -->
+<div class='triangle'></div>
diff --git a/dabblet.js b/dabblet.js
@@ -0,0 +1 @@
+// alert('Hello world!');
diff --git a/settings.json b/settings.json
@@ -0,0 +1 @@
+{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!-- content to be placed inside <body>…</body> -->
		<div class='triangle'></div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}