我正在尝试创建一个三 Angular 形,但边是圆的。我的意思是侧面,而不是 Angular 落。这样做的原因是三 Angular 形是为了模仿动物的耳朵。然而,我无法弄清楚如何让两侧不那么直。如果可能的话,我想要一个纯 CSS 解决方案。
如果您需要图片,这正是我想要的。
我已经设法得到 this far ,但我不确定下一步该去哪里。
.e1 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 75px 200px 75px;
border-color: transparent transparent #f7882e transparent;
-webkit-transform: rotate(-45deg);
}
<div class="e1"></div>
我试着搞乱 :before
和 :after
,但我想我搞砸了,因为尽管给了它我什至无法让它显示出来设置宽度/高度和 block 显示...再次,不确定去哪里。
最佳答案
使用 CSS:
您可以使用 CSS 实现的最佳效果如下所示。形状构造如下:
- 一个伪元素,其 border-radius 除了 border-top-right-radius 之外的所有边都是 100%。这会产生叶子状的形状。然后将其旋转 -45 度,使尖端朝向顶部。
- 然后定位这个伪元素,使其只有一半可见(通过在父级上将
overflow
设置为hidden
)。 - 然后将父容器的 Y 轴旋转一个高 Angular 以压缩形状。这使它看起来更像一个箭头。
形状是响应式的,但如您所见,它的创建非常棘手,这就是为什么 CSS 不是这项工作的正确工具。 SVG 是正确的工具,下面提供了演示。
div {
position: relative;
height: 200px;
width: 200px;
border-bottom: 2px solid tomato;
overflow: hidden; /* hide the parts that are not required */
transform: rotateY(65deg); /* to compress the shape in Y axis */
}
div:before {
position: absolute;
content: '';
left: 0px;
top: 50%; /* positioning to make only part of it visible */
height: calc(100% - 6px); /* to offset for the border width */
width: calc(100% - 6px); /* to offset for the border width */
border-radius: 100% 0% 100% 100%;
transform: rotate(-45deg);
border: 3px solid tomato; /* made thicker because the transform will make it look thinner than normal */
}
/* just for demo */
div {transition: all 1s ease;}
div:hover {
height: 250px;
width: 250px;
}
<div></div>
使用 SVG: 推荐
借助 SVG,我们可以使用单个 path
元素和几个 Quadratic Curve-to (Q
) 命令创建此形状。它非常简单,可扩展(响应),允许我们更好地控制曲率等。
使用的SVG命令及说明:
M
- 将虚构的笔移动到坐标指定的点。Q
- 从笔的当前位置到Q
命令后的第二组坐标指示的点绘制二次曲线。第一组坐标代表控制点。这个控制点决定了曲线的斜率。z
- 通过从当前笔位置到起点绘制一条直线来闭合形状。
SVG 形状也可以像普通 CSS 元素一样旋转。
svg {
height: 200px;
width: 200px;
}
path {
fill: none;
stroke: tomato;
stroke-width: 1;
}
/* just for demo */
svg {
transition: all 1s ease;
}
svg:hover {
transform: rotate(-15deg);
}
<svg viewBox="0 0 105 105" preserveAspectRatio="none">
<path d="M15,102 Q25,50 50,0 Q75,50 85,102z" />
</svg>
以上只是一个基本的实现。您可以使用二次曲线的控制点来获得不同的斜率。以下是一些可能的示例:
<path d="M15,102 Q25,35 50,0 Q75,35 85,102z" />
<path d="M15,102 Q20,35 50,0 Q80,35 85,102z" />
对此类形状使用 SVG 的另一个优点是,您可以轻松地向形状添加渐变或图像作为填充或背景。下面是一个演示:
svg {
height: 200px;
width: 200px;
}
path {
fill: none;
stroke: tomato;
stroke-width: 1;
}
path#image {
fill: url(#bg-image);
}
path#gradient {
fill: url(#bg-grad);
}
<svg viewBox="0 0 105 105" preserveAspectRatio="none">
<defs>
<pattern id="bg-image" width="1" height="1" patternUnits="objectBoundingBox">
<image xlink:href="https://placeimg.com/200/200/nature" width="105" height="105" />
</pattern>
</defs>
<path d="M15,102 Q20,35 50,0 Q80,35 85,102z" id="image" />
</svg>
<svg viewBox="0 0 105 105" preserveAspectRatio="none">
<defs>
<radialGradient id="bg-grad" width="1" height="1" patternUnits="objectBoundingBox">
<stop offset="0%" stop-color="#3F9CBA" />
<stop offset="100%" stop-color="#153346" />
</radialGradient>
</defs>
<path d="M15,102 Q20,35 50,0 Q80,35 85,102z" id="gradient" />
</svg>
关于html - 有两条圆边的三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41732896/