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

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

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

.shape {
  width: 200px;
  height: 100px;
  background-color: #f00;
  -webkit-clip-path: polygon(30% 0, 100% 0, 70% 100%, 0% 100%);
  clip-path: polygon(30% 0, 100% 0, 70% 100%, 0% 100%);
}

用的其他方法:

<!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>

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>

趣兔百科

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

回答

相关文章