JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="container"><span>Содержимое</span>
    <div class="agle1"></div>
    <div class="agle2"></div>
    <div class="agle3"></div>
    <div class="agle4"></div>
  </div>
</body>
</html>

CSS

.container {
  position: relative;
  height: 70px;
  width: 360px;
  background-color: #008000;
  color: white;
  display: flex;
  align-items: center;
}

.agle1, .agle2, .agle3, .agle4 {
  width: 5px;
  height: 5px;
  background-color: #fff;
  position: absolute;
}

.agle1 {
  top: 0;
  left: 0;
} 

.agle2 {
  top: 0;
  right: 0;
}

.agle3 {
  bottom: 0;
  right: 0;
}

.agle4 {
  bottom: 0;
  left: 0;
}

span {
  position: absolute;
  left: 50px;
}