如何使用 css 剪辑路径为容器的顶部和底部创建匹配的波浪边框？

问题描述 投票：0回答：1

我正在尝试创建一个顶部和底部都有波浪形、不完美边框的容器。我的目标是使顶部边框与底部边框的图案完全匹配。

我尝试使用 Clip-path 来实现此目的，但我无法让顶部边框与精确的 ame 模式匹配。这是我到目前为止尝试过的示例代码：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wavy Border Box</title>
    <style>
        #wavy-box {
            background-color: #F50001;
            height: 400px; 
            width: 100%;
            clip-path: url(#wavy-border);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            border: none;
            color: #DC7633;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <svg width="0" height="0">
      <defs>
        <clipPath id="wavy-border" clipPathUnits="objectBoundingBox">
          <path d="
              M0,0
              C0.05,0 0.2,0.03 0.25,0.02
              C0.3,0.015 0.35,0.02 0.35,0.025
              C0.355,0.0225 0.45,0.03 0.5,0.035
              C0.53,0.035 0.58,0.02 0.6,0.02
              C0.63,0.015 0.74,0.0275 0.75,0.03
              C0.78,0.0325 0.925,0.0125 0.95,0.015
              C0.97,0.0125 1,0.025 1,0.025
              L1,0.975
              C0.97,0.9875 0.925,0.9875 0.9,0.985
              C0.875,0.9825 0.78,0.9675 0.75,0.97
              C0.725,0.9725 0.63,0.985 0.6,0.98
              C0.58,0.98 0.53,0.965 0.5,0.965
              C0.45,0.97 0.355,0.9775 0.35,0.975
              C0.35,0.98 0.3,0.96 0.25,0.96
              C0.2,0.96 0.05,1 0,1
              Z"/>
        </clipPath>
      </defs>
    </svg>
    <div id="wavy-box">
        Your content here
    </div>
</body>
</html>

如图所示，顶部边框是倒置的，但我需要与底部边框相同的图案。

enter image description here

css animation clip-path
1个回答
0
投票

明白了。我的想法是将顶线复制到底部，只是使用更大的 

+1
。事实证明这是错误的，因为它在 
y
之后被修剪，所以我复制了顶线，并为 
1
的偏移量 
+0.9
。
虽然路径是顺时针方向走，但我必须绕道中间，这样我才能到达
y
点才能向右走。




(0,0.9)


body {
  background: #222;
}

#wavy-box {
  background-color: purple;
  height: 400px;
  width: 400px;
  clip-path: url(#wavy-border);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  font-size: 24px;
  border: none;
  color: #DC7633;
  text-align: center;
  padding: 20px;
}





    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.