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

Question

我尝试创建这样的文本容器但没有成功:



你能建议我解决这个问题吗？

我能够通过 clip-path 创建类似的东西，但我想知道如何制作这个形状元素？另请注意颜色差异。还有其他方法吗？

CodePen Demo

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

由于涉及两个不同 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>