Draw play button style with pure CSS and DIV

Recently, I am doing the video monitoring and playback docking of the front end. I got a play button on the front end and recorded it. The effect is shown in the figure:

HTML code:

<div className="box">
  <div className="one" >
       <div className="two">
            <div className="three">
               <div className="four"/>
            </div>
       </div>
       <span className='name'>QC班长威武</span>
  </div>
</div>

CSS code: Because it is a large-screen project, the pixel unit is vh, corresponding to the design draft of 1920x1080px, please change to px or other units as needed.

      .box {
        margin-top: -5vh;
        width: 100%;
        height: 14vh;
        background: linear-gradient(180deg, #192b52, #000000);
        border-radius: 2vh;
      }

      .one {
        margin: 5vh auto;
        height: auto;
        padding-top: 2.5vh;
        cursor: pointer;
      }

      .two {
        margin: auto;
        width: 10vh;
        height: 8vh;
        border: 1vh solid #52b5fa;
        background: linear-gradient(350deg, #1e7eee, #081464);
        border-radius: 2vh;
        padding-top: 1vh;
      }

      .three {
        margin: auto;
        width: 4.2vh;
        height: 4vh;
        border-radius: 1vh;
        background: #4b8df8;
        padding-top: 0.5vh;
        padding-left: 0.5vh;
      }

      .four {
        margin: auto;
        width: 0;
        height: 0;
        border: 1.5vh solid #000;
        border-left: 2vh solid #000;
        border-right: none;
        border-top-color: transparent;
        border-bottom-color: transparent;
      }
      .name{
        color: #ffffff;
      }