css绘制三角形四个方向分离

xiaoming_0208

已于 2023-02-01 15:27:53 修改

阅读量66

点赞数

分类专栏：前端文章标签： css 前端 html

于 2023-01-18 11:39:23 首次发布

本文链接：https://blog.csdn.net/xiaoming4965/article/details/128724739

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

  <div class="right-top-all">

            <div class="play-video">
                //上
                <div class="paly-top">
                  <div class="icon-top"></div>
                </div>

                //右
                <div class="paly-right">
                  <div class="icon-right"></div>
                </div>

                //下
                <div class="play-bottom">
                  <div class="icon-bottom"></div>
                </div>

                //左
                <div class="paly-left">
                  <div class="icon-left"></div>
                </div>

                //中间图片
                <div class="play-conter">
                  <img src="../../../assets/videoIcon/PTZ.png" alt="" />
                </div>
            </div>
</div>


    
    .right-top {
      position: relative;
      height: 250px;
      margin-bottom: 20px;
      margin-right: 20px;
      background: #363b45;
      border-color: #363b45;
      color: #fff;
      .right-top-all {
        position: absolute;
        top: 10%;
        left: 40%;
     
        // 绘制播放三角形
        .play-video {
          width: 200px;
          height: 200px;
          position: relative;
          top: 20%;

            // 上
          .paly-top {
            width: 35px;
            height: 35px;
            position: relative;
            border: 1px solid #278fcf;
            border-radius: 5px;
            background-color: #dbecfe;
            left: 20%;
            .icon-top {
              position: absolute;
              top: 32%;
              left: 28%;
              width: 0px;
              height: 0px;
              border-bottom: #1988cc 8px solid;   //样式
              border-left: transparent 7px solid;
              border-right: transparent 7px solid;
            }
          }
        // 右
          .paly-right {
            width: 35px;
            height: 35px;
            position: relative;
            border: 1px solid #278fcf;
            border-radius: 5px;
            background-color: #dbecfe;
            top: 3%;
            left: 42%;
            .icon-right {
              position: absolute;
              top: 32%;
              left: 45%;
              width: 0px;
              height: 0px;
              border-top: transparent 7px solid;
              border-bottom: transparent 7px solid;
              border-left: #1988cc 8px solid;   //样式
              border-right: transparent 7px solid;
            }
          }
            // 下
          .play-bottom {
            width: 35px;
            height: 35px;
            position: relative;
            border: 1px solid #278fcf;
            border-radius: 5px;
            background-color: #dbecfe;
            top: 5%;
            left: 20%;
            .icon-bottom {
              position: absolute;
              top: 20%;
              left: 28%;
              width: 0px;
              height: 0px;
              border-top: transparent 7px solid;
              border-bottom: #1988cc 8px solid; //样式
              border-left: transparent 7px solid;
              border-right: transparent 7px solid;
            }
          }
        // 左
          .paly-left {
            width: 35px;
            height: 35px;
            position: relative;
            border: 1px solid #278fcf;
            border-radius: 5px;
            background-color: #dbecfe;
            top: -32%;
            left: -2%;
            .icon-left {
              position: absolute;
              top: 32%;
              left: 15%;
              width: 0px;
              height: 0px;
              border-top: transparent 7px solid;
              border-bottom: transparent 7px solid;
              border-left: transparent 7px solid;
              border-right: #1988cc 8px solid;   //样式
            }
          }
         
        }
      }

     
    }