Skip to content

Instantly share code, notes, and snippets.

@demircancelebi

demircancelebi/dabblet.css

Created April 17, 2015 02:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save demircancelebi/06bd28cc13e842d5b26c to your computer and use it in GitHub Desktop.
Save demircancelebi/06bd28cc13e842d5b26c 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 {
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) }
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