Skip to content

Instantly share code, notes, and snippets.

@mismith

mismith/dabblet.css

Created January 22, 2013 00:11
Show Gist options
  • Save mismith/4590805 to your computer and use it in GitHub Desktop.
Save mismith/4590805 to your computer and use it in GitHub Desktop.
Download ZIP
How to make 3-corner-rounded triangle in CSS (SO)
Raw
dabblet.css
/**
* How to make 3-corner-rounded triangle in CSS (SO)
* http://stackoverflow.com/q/14446677/1397351
*/
.triangle, .triangle:before, .triangle:after {
width: 20em; height: 20em;
border-radius: 20%;
}
.triangle {
overflow: hidden;
position: relative;
margin: 7em auto 0;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
cursor: pointer;
pointer-events: none;
}
.triangle:before, .triangle:after {
position: absolute;
background: orange;
pointer-events: auto;
content: '';
}
.triangle:before {
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%)
skewX(30deg) translateY(6.7%) scaleY(.866) translateX(-25%);
}
.triangle:after {
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%)
skewX(-30deg) translateY(6.7%) scaleY(.866) translateX(25%);
}
.triangle:hover { overflow: visible; }
.triangle:hover:before, .triangle:hover:after { background: none; }
.triangle:hover, .triangle:hover:before, .triangle:hover:after {
border: dashed 1px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='triangle'></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment