JSFiddle - React, Tailwind, and code Playground

by CntChen

HTML

<div id="cube_cross">
    <div id="cube_cross_corss">
      <div id="cube_cross_line_one">
        <div id="line_one_a"></div>
        <div id="line_one_b"></div>
      </div>
      <div id="cube_cross_line_two">
        <div id="line_two_a"></div>
        <div id="line_two_b"></div>
      </div>
    </div>
  <div>

CSS

#cube_cross{
  width: 200px;
  height: 200px;
  transform: rotate(45deg);
  margin-left: 50px;
  margin-top: 50px;
}
#cube_cross_corss {
  position: relative;
  display: block;
  background-color: green;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 0px;
}
#cube_cross_line_one {
  width: 100%;
  height: calc(50% - 0.5px);
}
#cube_cross_line_two {
  width: 100%;
  height: calc(50% - 0.5px);
  margin-top: 1px;
}
#line_one_a {
  width: calc(50% - 0.5px);
  height: 100%;
  background-color: white;
  display: inline-block;
  box-sizing: border-box;
}
#line_one_b {
  margin-left: 1px;
  width: calc(50% - 0.5px);
  height: 100%;
  background-color: white;
  display: inline-block;
  box-sizing: border-box;
}
#line_two_a {
  width: calc(50% - 0.5px);
  height: 100%;
  background-color: white;
  display: inline-block;
  box-sizing: border-box;
}
#line_two_b {
  margin-left: 1px;
  width: calc(50% - 0.5px);
  height: 100%;
  background-color: white;
  display: inline-block;
  box-sizing: border-box;
}