Profile header styling

app/src/components/profile-header/profile-header.html

@@ -1,7 +1,12 @@
 <!-- Generated template for the ProfileHeaderComponent component -->
 <div>
-  <img src="{{ user.profile_banner_url }}" alt="{{ user.name }} - Banner" class="profile-banner" *ngIf="user.profile_banner_url">
-  <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="profile-picture">
+  <div class="profile-banner" [style.background]="'url('+ user.profile_banner_url +')'">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
+      viewBox="0 0 300 100" xml:space="preserve" width="100%" class="svg-triangle">
+      <polygon points="0,75  0,100 300,100" fill="#FFFFFF" />
+    </svg>
+    <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="avatar">
+  </div>
   <div padding>
     <p class="profile-stats">{{ user.followers_count | friendlyNumber }} Followers | {{ user.friends_count | friendlyNumber }} Following</p>
     <p class="profile-description" *ngIf="user.description">{{ user.description }}</p>

app/src/components/profile-header/profile-header.scss

@@ -1,3 +1,19 @@
 profile-header {
-
-}
+    .profile-banner {
+        width: 100%;
+        height: calc(100vw * 0.333333333);
+        background-size: cover;
+        position: relative;
+        .svg-triangle {
+            position: absolute;
+            bottom: -1px;
+        }
+    }
+    .avatar {
+        border-radius: 50%;
+        box-shadow: 0px 0px 4px 0px #777;
+        position: absolute;
+        bottom: -10px;
+        left: 15px;
+    }
+}