創建圓角很容易，但是當涉及到對邊緣應用不同的曲線和對角應用不同的曲線時，我們在某種程度上受限于邊界半徑的靈活性。我有一個形狀(不確定它的名字...)我想創建，理想情況下，只使用CSS。

考慮以下形狀:

我在border-radius中嘗試了各種值，但我相當有信心它需要的不僅僅是border-radius。我也考慮過應用某些變換，但是沒有一個可用的變換是合適的。

誰能建議一個CSS技巧來創建這個形狀？或者，我如何在HTML5 canvas中創建這個形狀？

我嘗試過的 我嘗試過組合的邊界半徑值，比如20% / 30%，但是沒有得到想要的形狀 我也嘗試了各種變換值，但是沒有一個可用的變換值是合適的 注意1:偽元素在這里可能不會起作用，因為a)最終形狀將用作圖像的遮罩，b)我需要對形狀應用漸變(作為邊框)

注意2:我已經為圖片添加了漸變，因為我需要為這個形狀添加一個邊框。然而，實際的漸變類型和顏色將與圖示不同。只要我可以添加漸變，我就可以應用必要的樣式來確保漸變是正確的

我相信你正在使用的形狀可以被稱為& quot松鼠。"不管怎樣，如果你可以創建一個矢量，那么你可以使用SVG創建一個頭像遮罩。

例如，您可以在矢量編輯程序中制作一個squircle形狀，并將其用作剪輯路徑。

HTML/SVG

<img class="clip-svg" src="https://picsum.photos/450" alt="Lorem Picsum">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450"><title>squircle</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
  <clipPath id="squircle">
  <path d="M225,449.5c-38.23,0-74.86-3.95-105.92-11.43-33.37-8-58.59-19.87-72.94-34.21S20,364.29,11.93,330.92C4.45,299.86.5,263.23.5,225s4-74.86,11.43-105.92C20,85.71,31.8,60.49,46.14,46.14S85.71,20,119.08,11.93C150.14,4.45,186.77.5,225,.5s74.86,4,105.92,11.43c33.37,8,58.59,19.87,72.94,34.21S430,85.71,438.07,119.08c7.48,31.06,11.43,67.69,11.43,105.92s-3.95,74.86-11.43,105.92c-8,33.37-19.87,58.59-34.21,72.94S364.29,430,330.92,438.07C299.86,445.55,263.23,449.5,225,449.5Z"/><path d="M225,1c38.19,0,74.78,4,105.8,11.42,33.29,8,58.42,19.8,72.7,34.08s26.07,39.41,34.08,72.7c7.47,31,11.42,67.61,11.42,105.8s-3.95,74.78-11.42,105.8c-8,33.29-19.8,58.42-34.08,72.7s-39.41,26.07-72.7,34.08C299.78,445.05,263.19,449,225,449s-74.78-3.95-105.8-11.42c-33.29-8-58.42-19.8-72.7-34.08s-26.07-39.41-34.08-72.7C5,299.78,1,263.19,1,225s4-74.78,11.42-105.8c8-33.29,19.8-58.42,34.08-72.7s39.41-26.07,72.7-34.08C150.22,5,186.81,1,225,1m0-1C150.66,0,76.31,15.26,45.79,45.79c-61,61.05-61,297.37,0,358.42C76.31,434.74,150.66,450,225,450s148.69-15.26,179.21-45.79c61.05-61,61.05-297.37,0-358.42C373.69,15.26,299.34,0,225,0Z"/>
  </clipPath></g></g></svg>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.clip-svg {
  clip-path: url(#squircle);
}

這是一個密碼筆

編輯 要添加漸變邊框，可以在squircle中使用第二個路徑。圖像上的簡單邊框不起作用，因為它環繞矩形圖像的邊緣并被切斷。這是一個帶有漸變邊框和蒙版圖像的背景squircle版本。

HTML/SVG

<svg width="516" height="516" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 516 516">
  <defs>
    <style>
      .background-squircle{fill:url(#linear-gradient);}
      .inner-image{clip-path:url(#clip-path);}
    </style>
    <clipPath id="clip-path">
      <path d="M258,482.5c-38.23,0-74.86-3.95-105.92-11.43-33.37-8-58.59-19.87-72.94-34.21S53,397.29,44.93,363.92C37.45,332.86,33.5,296.23,33.5,258s4-74.86,11.43-105.92c8-33.37,19.87-58.59,34.21-72.94S118.71,53,152.08,44.93C183.14,37.45,219.77,33.5,258,33.5s74.86,4,105.92,11.43c33.37,8,58.59,19.87,72.94,34.21s26.17,39.57,34.21,72.94c7.48,31.06,11.43,67.69,11.43,105.92s-3.95,74.86-11.43,105.92c-8,33.37-19.87,58.59-34.21,72.94S397.29,463,363.92,471.07C332.86,478.55,296.23,482.5,258,482.5Z"/>
    </clipPath>
    <linearGradient id="linear-gradient" y1="262" x2="524" y2="262" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/><stop offset="1"/>
    </linearGradient>
  </defs>
  <title>SquircleWithImage</title>
  <g id="Avatar_1" data-name="avatar">
    <path class="background-squircle" d="M258,515.5c-43.84,0-85.85-4.53-121.47-13.11-38.28-9.22-67.21-22.79-83.67-39.25s-30-45.39-39.25-83.67C5,343.85.5,301.84.5,258S5,172.15,13.61,136.53C22.83,98.25,36.4,69.32,52.86,52.86s45.39-30,83.67-39.25C172.15,5,214.16.5,258,.5S343.85,5,379.47,13.61c38.28,9.22,67.21,22.79,83.67,39.25s30,45.39,39.25,83.67C511,172.15,515.5,214.16,515.5,258S511,343.85,502.39,379.47c-9.22,38.28-22.79,67.21-39.25,83.67s-45.39,30-83.67,39.25C343.85,511,301.84,515.5,258,515.5Z"/>
    <g class="inner-image">
      <image id="Image" data-name="Layer 0" width="516" height="516" xlink:href="https://picsum.photos/516"/>
    </g>
  </g>
</svg>

希望這能有所幫助！ 這是為了創建一個squircle，它可以響應并處理瀏覽器的大小調整。