最近在做前端的视屏监控播放对接，前端弄了个播放按钮，记录下，效果如图所示：

HTML代码：

<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代码：因为是大屏的项目，所以像素单位是vh的，对应的是1920x1080px的设计稿，请根据需要换成px或者其他单位。

      .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;
      }