我尝试创建这样的文本容器但没有成功:
你能建议我解决这个问题吗?
我能够通过 clip-path
创建类似的东西,但我想知道如何制作这个形状元素?另请注意颜色差异。还有其他方法吗?
CSS
div {
width: 350px;
height: 350px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 91% 22%, 100% 45%, 91% 81%, 33% 88%, 0% 60%, 6% 23%);
clip-path: polygon(50% 0%, 91% 22%, 100% 45%, 91% 81%, 33% 88%, 0% 60%, 6% 23%);
}
最佳答案
由于涉及两个不同 Angular 两个不同渐变背景,因此使用单个元素执行此操作会变得非常复杂。它可以用一个元素完成,但需要为元素设置多个渐变背景,定位它们并调整 clip-path
。
与其变得如此复杂,不如使用几个元素,其中一个用于顶部的多边形,另一个用于底部的尾部部分。
以下是对实现该形状所做工作的完整描述:
- 向主容器
div
添加两个伪元素。:before
伪元素将在顶部形成多边形,:after
将在底部形成尾部。 - 需要两个伪元素,因为如果我们将父元素本身剪裁成多边形,那么由于父元素的剪裁,尾部也会变得不可见。
- 放置
:after
伪元素,使其bottom
和left
与多边形上最低点的坐标匹配。< - 将
background
以linear-gradient
的形式添加到polygon伪元素和tail like伪元素中。 :after
伪元素旋转了 -20 度,使其呈现出倾斜的外观。这也可以在不使用transform
的情况下完成(只需修改clip-path
的坐标)但我觉得使用transform
使它们成为更直观一些。
注意目前浏览器对clip-path
的支持很低,您可能想看看使用 SVG,因为剪辑路径不会在不使用内联 SVG 的情况下在 Firefox 中工作,在 IE 中它们根本无法工作。
div {
position: relative;
width: 250px;
height: 250px;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: linear-gradient(to bottom left, rgb(251, 228, 168), rgb(246, 197, 51));
-webkit-clip-path: polygon(35% 0%, 91% 12%, 100% 35%, 91% 67%, 33% 78%, 0% 50%, 6% 23%);
clip-path: polygon(35% 0%, 91% 12%, 100% 35%, 91% 67%, 33% 78%, 0% 50%, 6% 23%);
}
div:after {
position: absolute;
content: '';
height: 15%;
width: 22%;
left: 33%;
bottom: 7%;
background: linear-gradient(to bottom left, rgb(250, 225, 150), rgb(248, 210, 91) 45%, rgb(240, 168, 43) 50%, rgb(242, 181, 44) 55%, rgb(245, 192, 44));
transform-origin: left top;
transform: rotate(-20deg);
-webkit-clip-path: polygon(0% 0%, 90% 35%, 100% 100%, 0% 100%, 35% 40%);
clip-path: polygon(0% 0%, 90% 35%, 100% 100%, 0% 100%, 35% 40%);
}
<div></div>
下面的代码片段使用 url()
语法作为 clip-path
以及内联 SVG 也可以在 Firefox 中使用(但不能在 IE 中使用)。
div {
position: relative;
width: 250px;
height: 250px;
}
div:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: linear-gradient(to bottom left, rgb(251, 228, 168), rgb(246, 197, 51));
-webkit-clip-path: url(#polygon-clip);
clip-path: url(#polygon-clip);
}
div:after {
position: absolute;
content: '';
height: 15%;
width: 22%;
left: 33%;
bottom: 7%;
background: linear-gradient(to bottom left, rgb(250, 225, 150), rgb(248, 210, 91) 45%, rgb(240, 168, 43) 50%, rgb(242, 181, 44) 55%, rgb(245, 192, 44));
transform-origin: left top;
transform: rotate(-20deg);
-webkit-clip-path: url(#tail-clip);
clip-path: url(#tail-clip);
}
<svg width="0" height="0">
<defs>
<clipPath id='polygon-clip' clipPathUnits='objectBoundingBox'>
<polygon points='.35 0, .91 .12, 1 .35, .91 .67, .33 .78, 0 .5, .06 .23' />
</clipPath>
<clipPath id='tail-clip' clipPathUnits='objectBoundingBox'>
<polygon points='0 0, .9 .35, 1 1, 0 1, .35 .4' />
</clipPath>
</defs>
</svg>
<div></div>
关于html - 创建特定的 div 形状(如带尾部的多边形),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33794116/