创建特定的div形状(如带尾部的多边形)

Question

我正在努力创建像这样的文本容器:



能告诉我任何解决方案吗？

我能够创建类似的东西clip-path但我想知道如何制作这个形状元素？另请注意颜色差异.有没有其他方法可以做到这一点？

CodePen演示

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%);
}

Answer 1

由于存在两个不同的梯度背景,其中涉及两个不同的角度,因此使用单个元素执行此操作将变得非常复杂.它可以用一个单独的元素完成,但需要为元素设置多个渐变背景,定位它们并调整它clip-path.

最好不要使用这么多复杂的东西,而是使用一些元素,其中一个元素用于顶部的多边形,另一个元素用于底部的尾部部分.

以下是对实现形状所做的完整描述:

• 将两个伪元素添加到主容器中div.所述:before伪元素将形成在顶部的多边形和:after将形成在底部的尾.
• 需要两个伪元素,因为如果我们将父元素本身剪切成多边形,那么由于剪切父元素,尾部也会变得不可见.
• 将:after伪元素定位为使其bottom与left 多边形上最低点的坐标匹配.
• 以polygon伪元素和tail伪元素background的形式添加linear-gradient.
• 将: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>