绘制带有倒角边缘的双弯曲项目 [英] Draw double curved item with beveled edges
问题描述
我正在创建一个网站，标题/菜单位于顶部. 中间有一个徽标.为了强调这一点，我将椭圆绝对定位在徽标下方:因此，在下面，您会看到椭圆，它与菜单的其余部分完美融合.
I'm creating a website, with a header / menu on top. In the middle, there is a logo. To accentuate this, I've absolute positioned an ellips below the logo: So underneath, you see the ellips, which blends in perfectly with the rest of the menu.
.ellips {
border-radius: 50%;
height: 130%;
background: white;
left: 0px;
right: 0px;
z-index: 1;
position: absolute;
top: 6%;
border: 2px solid #dfe0e4;
}
现在，客户希望看到左右拐角"也弯曲:
Now the client wants to see the left and right 'corner' also curved:
我知道，在菜单下方插入省略号"方法是不够的. 我在考虑两种可能的解决方案:
I know that the 'shove an ellips beneath the menu' approach won't suffice. I was thinking about 2 possible solutions:
-
使用曲线创建SVG，并将其放置在菜单下方.我已经尝试过该解决方案，但是我不是SVG专家，所以我去尝试了CSS方法:
Create an SVG with the curve, and place it beneath the menu. I've tried that solution, but I'm no SVG expert, so I went to try a CSS approach:
尝试创建具有以下曲线的CSS项(div):上方为白色，下方为透明.将dat项目放在菜单下方.
Try to create CSS item (div) with such curve: above it's white, below it's transparent. Put dat item below the menu.
我更喜欢CSS解决方案，因为我不是SVG的大英雄.但是，如果可以使用SVG轻松实现这一目标.然后，我将使该解决方案脱离航路.
I prefer a css solution, as I'm no big hero in SVG. But if it can be achieved much easier with SVG. Then I'd take that solution off course.
您看到的蓝色背景是底层图像.因此，这需要透明.
The blue-ish background you see, is an underlaying image. So this needs to be transparant.
椭圆必须被涂成白色.
推荐答案
我创建了2个SVG示例，因此您可以选择将背景应用于何处
I created 2 SVG examples so you can choose where to apply the background
每个SVG元素的外部容器都保持特定的宽高比，以便整个元素可以响应(但是，当然，您也可以指定固定的宽度或高度).
The outer container of each SVG element keeps a specific aspect ratio so the whole element can be responsive (but, of course, you can also specify a fixed width or height).
基本思想是创建一个path，该SVG元素的大小，因此您可以按顺序在顶部或底部定义封闭形状用颜色填充它(如果将viewbox例如放大到-10 -10 610 130，则可以看到路径的实际定义方式.)
The basic idea is to create a path that overflows the size of the SVG element, so you can define a closed shape on the top area or on the bottom area, in order to fill it with a colour (if you enlarged the viewbox e.g. to -10 -10 610 130 you could see how the path is actually defined).
所应用的背景是渐变色，但是您也可以指定单个色标(在您的特定情况下为白色).主体元素上的背景显示SVG的透明部分.
The applied background is a gradient but you can also specify a single color-stop (white, in your specific scenario). The background on the body element shows the transparent parts of the SVG.
精细调整和调整曲线，视图框，颜色留给读者.
对于形状的任何更改，您都可以阅读路径有关MDN的文档
For any change to the shape you can read the path documentation on MDN
标记
<div class="doublecurve">
<svg viewBox="0 0 600 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#d8e5f1" />
<stop offset="100%" stop-color="#91b4d3" />
</linearGradient>
</defs>
<path class="concave" fill="url(#gradient)" d="M-2 2
L75 2 A75 75 0 0 1 110 20 C200 100 400 100 480 20
A75 75 0 0 1 525 2 L602 2 L602 122 L-2 122 z"/>
</svg>
</div>
<div class="doublecurve">
<svg viewBox="0 0 600 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#d8e5f1"/>
<stop offset="100%" stop-color="#91b4d3"/>
</linearGradient>
</defs>
<path class="concave" fill="url(#gradient)" d="M-2 2
L75 2 A75 75 0 0 1 110 20 C200 100 400 100 480 20
A75 75 0 0 1 525 2 L602 2 L602 -2 L-2-2"/>
</svg>
</div>
CSS
.doublecurve {
width: 100%;
height: 0;
margin: 20px 0;
border: 1px dashed #bc9;
padding-bottom: 20%;
position: relative; }
.doublecurve svg {
position: absolute;
width: 100%; height: 100%;}
.doublecurve path.concave {
stroke: #d0d0d0;
stroke-width: 4px;}
最终结果
这篇关于绘制带有倒角边缘的双弯曲项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
