css实现对角线拖动选择缩放正方形效果代码

代码语言:html

所属分类:拖放

代码描述:css实现对角线拖动选择缩放正方形效果代码

代码标签: css 对角线 拖放 缩放 正方形

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * {
          box-sizing: border-box;
        }
        body {
          min-height: 100vh;
          background: #8c59a6;
        }
        .resize {
          min-width: 10vmin;
          background: #40bfbf;
          resize: horizontal;
          overflow: auto;
        }
        .resize__wrap {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .resize__wrap:after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          height: 30px;
          width: 30px;
          background: #d6f5f5;
          clip-path: polygon(0 100%, 100% 100%, 100% 0);
          -webkit-clip-path: polygon(0 100%, 100% 10.........完整代码请登录后点击上方下载按钮下载查看

网友评论0