JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="element">
      <div class="element__block">
        <div class="element__wrapper">
          <span class="element__text"> видео-конференции </span>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

body {
  font-size: 14px;
}
.element {
  max-width: 1200px;
  height: 500px;
  background-color: grey;
  position: relative;
  border: 1px solid #000;
  display: flex;
  flex-direction: row;
  background-image: url(https://www.ixbt.com/img/x780/n1/news/2019/11/5/d3T1qbDYoZb2xbfl.jpg);
  -webkit-background-size: cover;
  background-size: cover;
}
.element__block {
  clip-path: polygon(90% 0, 100% 0, 100% 100%, 15% 100%);
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgb(223, 223, 223);
  height: 100%;
  width: 100%;
}
.element__wrapper {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: flex-end;
}
.element__text {
  position: relative;
  font-size: 5vw;
  font-family: Arial;
  font-weight: 600;
  word-wrap: break;
  text-align: right;
  padding: 25px;
}
.element__text:before {
  content: "";
  /* display: inline-block; */
  height: 0.20em;
  width: 0.20em;
  background: red;
  border-radius: 50%;
  /* position: absolute; */
  /* left: 5px; */
  /* top: 25%; */
  text-align: right;
}