文章/答案/技术大牛

发布

社区首页 >问答首页 >使用JavaScript和CSS clip-path属性绘制多边形

问使用JavaScript和CSS clip-path属性绘制多边形
EN

Stack Overflow用户

提问于 2017-12-14 04:32:08

回答 1查看 741关注 0票数 2

我有以下代码作为我的代码，它给了我想要的效果。

#overlay {
  background-color: rgba(0, 0, 0, 0.66);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon( 0% 0%, /*exterior top left*/
  0% 100%, /*exterior bottom left*/
  220px 100%, /*overlapping point exterior 1*/
  220px 50%, /*overlapping point interior 1*/
  220px 310px, /*interior top left*/
  683px 310px, /*interior top right*/
  683px 450px, /*interior bottom right*/
  220px 450px, /*overlapping point interior 2*/
  220px 100%, /*overlapping point exterior 2*/
  100% 100%, /*exterior bottom right*/
  100% 0%);
  /*exterior top right*/
}

<body>
  <div>Some background</div>
  <div id="overlay">

  </div>
  <div id="closeButton">
    <p>
      Close
    </p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    function main() {
      $("#overlay").hide();
      $("#overlay").fadeIn(500);

      $("#closeButton").on("click", function() {
        $("#overlay").toggle();
      });
    }
    $(document).ready(main);
  </script>
</body>

我想知道我是否可以写一个函数来做同样的事情，它接受一个坐标数组，这样我就不必在每次移动窗口时都硬编码它。它会在按下closeButton时触发。

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-14 04:49:47

当然，您可以在JavaScript中计算多边形字符串，然后在元素上设置该样式。下面是一个示例函数，它可以采用2个像素坐标来创建一个类似的多边形：

#overlay {
  background-color: rgba(0, 0, 0, 0.66);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<body>
  <div>Some background</div>
  <div id="overlay">

  </div>
  <div id="closeButton">
    <p>
      Close
    </p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>

    // Copy this function:
    function generatePoly(p1, p2) {
        var a = p1[0] + 'px';
        var b = p1[1] + 'px';
        var c = p2[0] + 'px';
        var d = p2[1] + 'px';
        return 'polygon(' + [
          '0% 0%',
          '0% 100%',
          a + ' 100%',
          a + ' 50%',
          a + ' ' + b,
          c + ' ' + b,
          c + ' ' + d,
          a + ' ' + d,
          a + ' 100%',
          '100% 100%',
          '100% 0%'
        ].join(', ') + ')';
    }

    function main() {

      // Run this when you want to set the polygon:
      $("#overlay").css('clip-path', generatePoly([40, 80], [120, 200]));

      $("#overlay").hide();
      $("#overlay").fadeIn(500);

      $("#closeButton").on("click", function() {
        $("#overlay").toggle();
      });
    }
    $(document).ready(main);
  </script>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47801663

复制

相似问题

问使用JavaScript和CSS clip-path属性绘制多边形
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript和CSS clip-path属性绘制多边形EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript和CSS clip-path属性绘制多边形
EN