# CSS Battle: #13 - Totally Triangle



In this article, I will solve a [Totally Triangle](https://cssbattle.dev/play/13) CSS Challenge on [CSS Battle](https://cssbattle.dev). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Totally Triangle](https://cssbattle.dev/targets/13.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

%[https://youtu.be/T6u4m5ckPOU]

### HTML


```html
<p> 
```

### CSS

Now let's style the containers. 

```css
* {
  margin: 0;
  background: #0b2429;
}
p {
  position: fixed;
  width: 200;
  height: 200;
  background: #f3ac3c;
  transform: rotate(45deg);
  left: -100;
  top: -100;
}
```

>*Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)*

>*Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.*


**Minified Version:**
```text
<p><style>*{margin:0;background:#0B2429}p{position:fixed;width:200;height:200;background:#F3AC3C;transform:rotate(45deg);left:-100;top:-100}
```

## Alternative Method

### CSS

```css
body {
  background: linear-gradient(135deg, #f3ac3c 100px, #0b2429 100px);
}
```

You can achieve this by using [`linear-gradient()` ](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) also which is a lot simpler. You don't even need HTML in this.


## Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.