How create the Kotlin Logo with CSS3
Tags: tutorial, css, webdev
Published: 2022-07-02 14:36:29

Hi!, in a previous post I explain [how to make a triangle in CSS3](https://dev.to/jmlpez/how-make-a-triangle-in-css3-1b8a) , in this post I will show you how to create the Kotlin logo using that tecnique, gradients and a few CSS3 tricks.

This is the goal (there are another Kotlin logos but I choose this because is more interesting to explain):

![Kotlin Logo Original](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/athltygzo40y5rkxv5lf.png)

## Let's Create it!

## First!

### 1- Prepare the environment

Create a folder and open it in your code editor

Create two files: `index.html`, `style.css`

#### Now just type the basic HTML and open it in your browser

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Template Static Web App</title>
        <link rel="stylesheet" href="./css/style. css" />
    </head>
    <body>
        <section class="section">
            <div class="logo-container">
                <div class="logo-back">
                    <div class="logo"></div>
                </div>
                <strong class="logo-name">Kotlin</strong>
            </div>
        </section>
    </body>
</html>
```

I have a `section` to wrap all the content and the `logo-container` wrap the logo and the logo-name

The logo is drawn in the `logo-back` and the `logo` classes

#### Basic Styles

```
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: white;
}

```

## Next!

### 2- Create the Logo

WARNING: this is an aproximation of the original Logo because  I couldn't get get the original values , however is quite similar :)

The background of the Kotlin logo is a `linear-gradient`, but we are painting triangles (with the `border-property` tecnique) so to achieve "gradient-borders" we paint a box (the `logo-back` class) with a `linear-gradient` (which is supported for the `background` property).

The trick is that in the `logo` class we set `border: 100px solid transparent`. The `border-width` is 100px - the half of the parent width/height - because the border is applied to all the sides so 100px in top, 100px in the bottom ... and the goal is to make it fit perfectly in the container so I set `position: absolute` to remove it from the document flow and positioning the way I want.

The `border-right-color` is equal to the `background-color` of the section and with that trick I "remove" the triangle of the right and our logo start to take shape.

```
.logo-back {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #0096d6 20%, #7972e3 60%);
    position: relative;
}
.logo {
    position: absolute;
    top: 0;
    left: 0;
    border: 100px solid transparent;
    border-right-color: white;
}
.logo-name{
    display:none;
}
```

Let's set `display:none` to the `logo-name` and look the result at this time:

![Kotlin logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jvofza1mk567wuq5t70.png)

#### Note:

if you are interested in learning more about "gradient-borders" check this [post](https://nikitahl.com/gradient-border-css).

## The final shape

It's turn of create and correct positioning the quadrilateral in the middle.

Let use the `after` pseudo-element of the `logo` class to achieve that:

```
.logo::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(0, #c856bd 0%, #f88a02 65%;
    width: 75px;
    height: 300px;
}
```
Look what just happen 😯:
![Kotlin logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjy8fwnhb8k65pbzba9c.png)

### Why is positioning in the middle if I set `top: 0` and `left: 0` ?

There is no problem at all, it's working in the exactly way is suppose to work (And fortunaly in the way we want 😁). That's because the `position: absolute` property position the element respect to the closest parent with non-static position and the `top` start exactly in the
**padding** not at the **border**, and the parent does not have any padding or content so is positioning where the padding should start, right in the middle!!.

## Time to transform

Let use the `transform` property to move the rectangle, but first let's think in a clever solution 🤔.

It's necessary rotate the rectangle but by default the `tranform-origin` is set right in the middle of the box so if I set `transform: rotate(45deg)` look what happen:
![Kotlin logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mssis4j0c44mio7j8r5m.png)

You could move it and try to correct positioning the shape but it's quite difficult to achieve that cleanly so let's think in other approach:
```
transform-origin: 0% 0%;
```
This means that all the transformations will be starting  from (0, 0) or the top-left corner, look what happen now if I rotate the shape:

![Kotlin logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42f5tyuwirjrc9v7scct.png)

It's correctly rotated, it's time to translate it.

The shape needs to cover the upper triangle. if you look carefully I just have to move it all of it `width` in the y-axis and the half of it `heigth` in the x-axis.

```
transform: rotate(45deg) translate(-100%, -50%);
```

Convence yourself of those values (if you don't understand the minus in the translation, remove the rotation and you will notice)

![Kotlin logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mj57dai97x1ums71yx62.png)

Now it's just set `overflow-hidden` to the `logo-back` box to remove all the content out of it boundaries:

![Kotlin logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbjyic2qz4nxydqrr73g.png)

You can change the witdh of the shape and it will be exactly in the same place 😁

## Styling the logo-name

Before all set `display: flex` to the `logo-container`

```
.logo-container{
    display: flex;
}
```

Then just basic styles for the logo-name:

```
.logo-name {
    font-size: 290px;
    display: block;
    line-height: 200px;
    margin-left: 32px;
    color: #1e191a;
    font-family: sans-serif;
}
```

The `line-height` property have the same `height` of the logo and the `font-size` it is a little bigger so that it is exactly at the same height as the logo. if you want to know more about the `line-height` property check this [link](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)

### Note:

The font-family is sans-serif because the original font which is "JetBrains Sans" is property of the company and requires a license to use.

Check the final result:
![Kotlin logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8w1qk3fgw0dryodtp8i.png)

You can compare both logos and look some differences but I am satisfied and I really enjoyed doing it.

If you have any doubt, question or suggestion , please leave a comment. Thanks in advance!

Check and test the code [here](https://codepen.io/Jmlpez/pen/qBodXBv)