• Locked
2 replies [Last post]
Mon, 2015-05-18 08:55
arden
arden's picture
Offline
newbie
Last seen: 4 years 28 weeks ago
Timezone: GMT+1
Joined: 2015-05-18
Posts: 3
Points: 4

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

Top
Tags:
Mon, 2015-05-18 09:57
#1
arden
arden's picture
Offline
newbie
Last seen: 4 years 28 weeks ago
Timezone: GMT+1
Joined: 2015-05-18
Posts: 3
Points: 4

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>

Top
Mon, 2015-05-18 11:15
#2
arden
arden's picture
Offline
newbie
Last seen: 4 years 28 weeks ago
Timezone: GMT+1
Joined: 2015-05-18
Posts: 3
Points: 4

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>

Top
  • Locked