amy logo using css transformations

by kpowz

HTML

<div class="aqua-logo">
    <span class="aqua-mtn">></span>
    <span class="aqua-wave1">}</span>
    <span class="aqua-wave2">}</span>
</div>

CSS

.aqua-logo {
    width: 300px;
    height:150px;
    background: #46818C;
    margin: 20px;
    font-size:75px;
    position:relative;
}
.aqua-logo .aqua-wave1, .aqua-wave2 {
           color: #80FFF4;
           display: inline-block;
            position:relative; right:10px; top:-8px;
            -webkit-transform: rotate(-90deg) skew(0deg, -28deg);
            -moz-transform: rotate(-90deg) skew(0deg, -28deg);
            -ms-transform: rotate(-90deg) skew(0deg, -28deg);
            -o-transform: rotate(-90deg) skew(0deg, -28deg);
            transform: rotateZ(-90deg) skew(0deg, -28deg);
}
.aqua-wave2 {
   position:relative; right:55px; top:10px;
}

.aqua-logo .aqua-mtn {
   color: #7FFFD4;
   display: inline-block;
   transform: rotate(-90deg);
   position:relative;
   font-size:1.5em;
}