html - CSS中的复杂边界半径问题(边缘曲线与角曲线不同)
问题描述
创建圆角很容易,但是在border-radius
将不同的曲线应用于边缘和将不同的曲线应用于拐角时,我们的灵活性受到了一定的限制。我有一个形状(不确定它的名字......),我想创建,理想情况下,只使用 CSS。
考虑以下形状:
我在内部玩过各种价值观,border-radius
但我相当有信心它需要的不仅仅是border-radius
. 我也考虑过应用某些transform
's 但可用的转换似乎都不合适。
任何人都可以提出一个允许创建这种形状的 CSS 技巧吗?或者,或者,我如何在 HTML5 画布中创建这个形状?
我试过的
- 我玩过组合
border-radius
值,例如20% / 30%
但无法获得所需的形状 - 我也尝试了各种
transform
值,但没有一个可用的转换似乎合适
注意 1:伪元素在这里可能不起作用 a) 最终形状将用作图像的蒙版,并且 b) 我需要对形状应用渐变(作为边框)
注意 2:出于说明目的,我已在图像中添加了渐变,因为我需要为该形状应用边框。但是,渐变的实际类型和颜色将与图示有所不同。只要我可以添加渐变,我就可以应用必要的样式以确保渐变正确
解决方案
我相信您使用的形状可能被称为“松鼠”。无论如何,如果您可以将其创建为矢量,那么您可以使用 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);
}
这是一个代码笔
编辑
要添加渐变边框,您可以使用松鼠中的第二条路径。图像上的简单边框不起作用,因为它绕过矩形图像的边缘并被切断。这是一个带有渐变边框和蒙版图像的背景松鼠版本。
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>
推荐阅读
- java - 我在哪里放置一个 .store 文件在 netbeans 中以便将其设置为系统属性
- kotlin - 扩展函数总是可以翻译成成员吗?
- micronaut - 如何使用一个 HttpClient 实例请求多个不同域的 URL?
- clojure - 在 Leiningen 之前创建一个 Clojure 项目是什么感觉?
- spring - 从属性文件中按值声明枚举
- bash - 多遍变量扩展,可以吗?
- javascript - 根据值跳过数组中的每个第 n 个值
- php - Laravel如何在创建7天后删除数据库记录
- stata - 遍历文件夹以生成和保存每个文件的图形
- android - android中的深度层