CSS中的复杂边界半径问题(不同的边曲线到角曲线)

webghufk 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(127)

创建圆角很容易，但当涉及到对边缘应用不同的曲线和对拐角应用不同的曲线时，border-radius的灵活性有些有限。我有一个形状（不确定它的名字...），我想创建，理想情况下，只使用CSS。
考虑以下形状：

我已经在border-radius中尝试过各种值，但我相当有信心它需要的不仅仅是border-radius。我也考虑过应用某些transform的，但没有一个可用的转换似乎是合适的。
有谁能建议一个CSS技巧，将允许一个创建这种形状？或者，或者，我如何在HTML5画布中创建这个形状？

我所尝试的

我已经尝试过border-radius的组合值，例如20% / 30%，但没有能够得到所需的形状
我还尝试了各种transform值，但没有一个可用的转换似乎是合适的
***注意1：***伪元素可能在这里不起作用，因为a）最终形状将用作图像的遮罩，b）我需要对形状应用渐变（作为边界）
***注2：****为了说明的目的，我已经添加了一个梯度到图像，因为我需要应用一个边界到这个形状。然而，实际的渐变类型和颜色将与所示的不同。只要我可以添加渐变，我就可以应用必要的样式来确保渐变正确 *

css

来源：https://stackoverflow.com/questions/59117658/complex-border-radius-issue-different-edge-curve-to-corner-curve-in-css

2条答案

按热度按时间

b5buobof1#

我相信你正在使用的形状可能被称为“squircle”。无论如何，如果你可以创建它作为一个矢量，那么你可以创建一个使用SVG的头像面具。
例如，您可以在矢量编辑程序中创建一个方形形状，并将其用作剪辑路径。

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>

CSS

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

这里是as a codepen

编辑

要添加渐变边框，可以在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>

赞(0）回复(0）举报 2023-06-25

brccelvz2#

SVG渐变笔划

SVG支持笔划/边框填充渐变。
因此，您可以只裁剪<image>元素，并将渐变笔划直接应用于蠕动形状，而不是使用两个裁剪元素：

svg {
  width: 10em;
}

<h3>SVG squircle - image clipped</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  <defs>
  <!-- reusable squircle path -->
    <path id="squircle" d="M 59 10 h 2 c 39.813 0 49 9.188 49 49 v 2 c 0 39.813 -9.188 49 -49 49 h -2 c -39.813 0 -49 -9.188 -49 -49 v -2 c 0 -39.813 9.188 -49 49 -49"/>
    <clipPath id="clip">
      <use href="#squircle" />
    </clipPath>
    <radialGradient id="gradient" cx="0" cy="0" r="2" >
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
  </defs>

    <!-- stroke -->
  <image href="https://picsum.photos/id/237/200/200" clip-path="url(#clip)" height="100%" width="100%" preserveAspectRatio="xMidYMid meet"/>
  
  <!-- stroke -->
   <use href="#squircle" fill="none" stroke="url(#gradient)" stroke-width="10" />
 </svg>

SVG：用图片填充方形

您也可以使用图像<pattern>来填充您的squercle形状，而不是裁剪。
参见"Fill SVG path element with a background-image"

<h3>SVG squircle - squircle filled with image</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
  <defs>
  <pattern id="imgFill" patternUnits="userSpaceOnUse" width="100%" height="100%">
    <image href="https://picsum.photos/id/237/200/200" x="0" y="0" width="100%" height="100%" />
  </pattern>
    <radialGradient id="gradient2" cx="0" cy="0" r="2" >
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
  </defs>
    <path id="squircle2" d="M 59 10 h 2 c 39.813 0 49 9.188 49 49 v 2 c 0 39.813 -9.188 49 -49 49 h -2 c -39.813 0 -49 -9.188 -49 -49 v -2 c 0 -39.813 9.188 -49 49 -49" fill="url(#imgFill)" stroke="url(#gradient2)" stroke-width="10"/>
 </svg>

CSS：剪辑 Package 元素和图片

我们需要将裁剪过的图像 Package 在一个元素中，该元素也用相同的squercle裁剪过。
笔划宽度由填充值设置。
渐变填充由父对象的背景颜色定义。

*{
  box-sizing: border-box;
}

.clipped {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
  object-position: 50%;
  clip-path: url(#clipPathSquircle);
}

.squircle-wrp{
  width:10em;
  height:10em;
  aspect-ratio:1;
  background: radial-gradient(
    farthest-corner at 0px 0px,
    yellow 0%, red 100%);
  padding:15px;
}

<h3>CSS squircle - wrap and image clipped</h3>

<div class="squircle-wrp clipped">
  <img src="https://picsum.photos/id/237/200/200" class="img-square clipped">
</div>

<!-- hidden svg clip asset -->
<svg style="width:0; height:0; position:absolute">
  <clipPath id="clipPathSquircle" clipPathUnits="objectBoundingBox"><path  d="M 0.492 0.083 h 0.017 c 0.332 0 0.408 0.077 0.408 0.408 v 0.017 c 0 0.332 -0.077 0.408 -0.408 0.408 h -0.017 c -0.332 0 -0.408 -0.077 -0.408 -0.408 v -0.017 c 0 -0.332 0.077 -0.408 0.408 -0.408" /></clipPath>
</svg>

另请参阅“如何创建带边框的Squircle？“

赞(0）回复(0）举报 2023-06-25

我来回答

CSS中的复杂边界半径问题(不同的边曲线到角曲线)

我所尝试的

2条答案

HTML/SVG

CSS

编辑

HTML/SVG

SVG渐变笔划

SVG：用图片填充方形

CSS：剪辑 Package 元素和图片

相关问题

热门标签

最新问答