JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<h2>Clip path:</h2>
<div class="block clip-path"></div>
<h2>Gradient:</h2>
<div class="block gradient"></div>
<h2>Вложенные элементы(или псевдоэлементы):</h2>
<div class="block multiple">
  <div class="item"></div>
</div>
<h2>Text:</h2>
<div class="block text"><span>V</span></div>

CSS

.block {
  width: 50px;
  height: 50px;
  margin: 10px;
}

.clip-path {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background-color: red;
}

.gradient {
  background-image: linear-gradient(45deg, red 50%, transparent 50%)
}

.multiple {
  overflow: hidden;
  position: relative;
  background-color: red;
}

.multiple .item {
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 150%;
  transform: translate(-50%, 20%) rotate(45deg);  
}

.text{
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text span {
  font-family: sans-serif;
  font-weight: 900;
  font-size: 500px;
  color: red;
  transform: translate(25px, 0px) rotate(60deg);
}