Mon, 2015-05-18 08:55
Hi,
I'm new to CSS and trying to create a pure CSS version of a company logo, Avid
The logo is http://commons.wikimedia.org/wiki/File:2009_Avid_logo.svg
and I've only managed to get this far, so far.
.triangle,.triangle2 { position: relative; background-color: #663399; text-align: left; } .triangle:before, .triangle:after { content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after, .triangle2, .triangle2:before, .triangle2:after { width: 10em; height: 10em; border-top-right-radius: 20%; } .triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } .triangle:before, .triangle2:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); } .triangle:after, .triangle2:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); } .triangle2 { transform: rotate(-360deg) skewX(-30deg) scale(1,.866); } .triangle2:before, .triangle2:after { content: ''; position: absolute; background-color: inherit; } body { padding: 30%; } <div class="triangle"></div> <div class="triangle2"></div>
The second triangle drops ontop of the first instead of to it's right, some pointers would be helpful!
Thanks,
arden
Mon, 2015-05-18 09:57
#1
Updated code to include all
Updated code to include all letters.
.triangle, .triangle2, .triangle3 { position: relative; background-color: #663399; text-align: left; } .triangle:before, .triangle:after, .triangle2:before, .triangle2:after, .triangle3:before, .triangle3:after{ content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after, .triangle2, .triangle2:before, .triangle2:after, .triangle3, .triangle3:before, .triangle3:after { width: 10em; height: 10em; border-top-right-radius: 20%; } .triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } .triangle:before, .triangle2:before, .triangle3:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); } .triangle:after, .triangle2:after, .triangle3:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); } .triangle2 { transform: rotate(-360deg) skewX(-30deg) scale(1,.866); } .triangle3 { transform: rotate(-330deg) skewX(-30deg) scale(1,.866); } .rcorners1 { border-radius: 20px; background: #663399; padding: 25px; width: 10px; height: 150px; } <body> <div class="triangle"></div> <div class="triangle2"></div> <div class='rcorners1'></div> <div class="triangle3"></div> </body>
Mon, 2015-05-18 11:15
#2
Think I got it, although the
Think I got it, although the last triangle is slightly smaller.
Is the below the correct way to do this? I've noticed if changing the size I've to make quite a few edits and I've yet to be able to set inside a TD (table) etc..
.triangle, .triangle2, .triangle3 { position: relative; background-color: #663399; text-align: left; } .triangle:before, .triangle:after, .triangle2:before, .triangle2:after, .triangle3:before, .triangle3:after{ content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after, .triangle2, .triangle2:before, .triangle2:after, .triangle3, .triangle3:before, .triangle3:after { width: 10em; height: 10em; border-top-right-radius: 20%; } .triangle { transform: rotate(-60deg) skewX(-30deg) scale(1,.866); } .triangle:before, .triangle2:before, .triangle3:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%); } .triangle:after, .triangle2:after, .triangle3:after { transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%); } .triangle2 { transform: rotate(-360deg) skewX(-30deg) scale(1,.866); } .triangle3 { transform: rotate(-330deg) skewX(-30deg) scale(1,.866); } .rcorners1 { border-radius: 20px; background: #663399; padding: 25px; width: 10px; height: 150px; } body { padding: 10%; } <div class="triangle"></div> <div class="triangle2"></div> <div class='rcorners1'></div> <div class="triangle3"></div>