obrazek w samy css

Witam, mam pytanie, czy można w samym css'ie zrobić coś takiego jak na wklejonym obrazku ! https://iv.pl/image/rysunek1.GISaAjB

Można użyć na przykład pseudo-elementów.

<div class="square"></div>

.square {
  /* tutaj stylizujemy kwadrat z obramowaniem */
}

.square::before {
  /* tutaj stylizujemy zielony trójkąt */
}

.square::after {
  /* tutaj stylizujemy czerwony trójkąt */
}

https://css-tricks.com/snippets/css/css-triangle/ <-- tutaj jeszcze link jak zrobić trójkąt w css

a coś bliżej jeśli można prosić ? :)

W tym wypadku nawet można było zrezygnować z ::after dając zielony kolor jako tło

<div class="square"></div>

.square {
  position: relative;
  width: 30px;
  height: 30px;
  border: 4px solid #000;
  overflow: hidden;
  background: green;
}

.square::before {
  position: absolute;
  top: -4px;
  right: 0;
  transform: rotate(-45deg);
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 24px solid red;
  content: '';
}

Jakbyś chciał dostosować wymiary to trzeba zmienić kilka wartości, ale powinieneś sobie poradzić.

@Xarviel: Super, dzięki :)