`clip-path` 如何绘制圆角平行四边形呢?

 .polygon-box {
            width: 192px;
            height: 65px;
            background-color: #8D8D8D;
            clip-path: polygon(0px 0px, 8px 65px, 192px 65px, 184px 0px);
        }

clip-path 这样绘制的是非圆角的平行四边形!

阅读 4.4k

https://jsrun.net/4HFKp

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆角平行四边形-基于clip-path path函数实现</title>
  <style>
    ul {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    li {
      border: 1px solid black;
      list-style: none;
    }

    .polygon {
      width: 200px;
      height: 100px;
      background-color: #ddd;
      clip-path: path('M 0,0 H 150 L 200, 100 H 50 Z');
    }
  </style>
</head>

<body>
  <ul>
    <li>
      <div class="polygon polygon1"></div>
    </li>
    <li>
      <div class="polygon polygon2"></div>
    </li>
    <li>
      <div class="polygon polygon3"></div>
    </li>
    <li>
      <div class="polygon polygon4"></div>
    </li>
  </ul>

  <script>
    function setPath(element, pw, len) {
      // pw 四边形宽度
      // len 圆角起始点距离矩形定点距离
      const rect = element.getBoundingClientRect();
      const width = rect.width;
      const height = rect.height;

      pw = pw || width * .8
      len = len || 10

      const angle = Math.atan(height / (width - pw));
      const degree = angle * (180 / Math.PI);
      const dx = len * Math.cos(angle)
      const dy = len * Math.sin(angle)

      // x0 y0 平行四边形顶点坐标；x y 圆角起始点左边
      var dot1 = { x0: 0, y0: 0, x: dx, y: dy, }
      var dot2 = { x0: 0, y0: 0, x: len, y: 0, }
      var dot3 = { x0: pw, y0: 0, x: pw - len, y: 0, }
      var dot4 = { x0: pw, y0: 0, x: pw + dx, y: dy, }
      var dot5 = { x0: width, y0: height, x: width - dx, y: height - dy, }
      var dot6 = { x0: width, y0: height, x: width - len, y: height, }
      var dot7 = { x0: width - pw, y0: height, x: width - pw + len, y: height, }
      var dot8 = { x0: width - pw, y0: height, x: width - pw - dx, y: height - dy, }

      var path = `M ${dot1.x},${dot1.y} S ${dot2.x0},${dot2.y0} ${dot2.x},${dot2.y} L ${dot3.x},${dot3.y} S ${dot4.x0},${dot4.y0} ${dot4.x},${dot4.y} L ${dot5.x},${dot5.y} S ${dot6.x0},${dot6.y0} ${dot6.x},${dot6.y} L ${dot7.x},${dot7.y} S ${dot8.x0},${dot8.y0} ${dot8.x},${dot8.y} Z`

      // path拼接完成，既可以在css的clip-path: path()中使用，也可以在svg path标签d属性中使用

      element.style.clipPath = `path('${path}')`;
    }

    setPath(document.querySelector('.polygon1'), 140, 0)
    setPath(document.querySelector('.polygon2'), 140, 20)
    setPath(document.querySelector('.polygon3'), 140, 40)
    setPath(document.querySelector('.polygon4'))
  </script>
</body>

</html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .button { background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); width: 100px; height: 30px; text-align: center; transform: skewX(-45deg); border-radius: 20px; } .button>div { color: white; transform: skewX(45deg); } </style> </head> <body> <div href="#yolo" class="button"> <div>Click me</div> </div> </body> </html>

`clip-path` 如何绘制圆角平行四边形呢?

你尚未登录，登录后可以

纯css怎么搞出这么个圆环渐变效果呢？再进一步可以搞成圆边是虚线么？

浏览器可以直接解析scss文件了吗？

Web PC端如何实现页面固定区域打印和批量打印？

图片沿着圆环的转动有什么方法吗？

点击dom节点里面的子元素，如何点击的是某个节点？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

CSS float布局中倒数第二层元素为何浮动到最右边，导致左侧空白？