创建特定的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

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

使用一些元素，而不是那么复杂，最好使用一个元素，其中一个元素用于顶部的多边形，另一个元素用于尾部的底部部分。

以下是对实现形状所做的工作的完整描述：

• 将两个伪元素添加到主容器div。 :before伪元素将在顶部形成多边形，:after将在底部形成尾部。
• 需要两个伪元素，因为如果我们将父元素本身剪切成多边形，那么由于剪切父元素，尾部也会变得不可见。
• 定位:after伪元素，使其bottom和left与多边形上最低点的坐标匹配。
• 以background的形式将linear-gradient添加到polygon伪元素和类似伪元素的尾部。
• 将:after伪元素旋转-20度，使其具有倾斜的外观。这也可以在不使用transform的情况下完成（只需修改clip-path的坐标）但我觉得使用transform会使它们更直观。

注意：目前对clip-path的浏览器支持率非常低，您可能希望看一下使用SVG，因为剪辑路径在Firefox中不起作用而不使用内联SVG和在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>

Answer 2

SVG

我会考虑只使用带有渐变的复杂图像的svg。

仅使用svg执行此操作的优点是：
每条路径都有一个渐变，因此很容易跟踪 您只需要树形元素来绘制主要形状 它得到了所有主流浏览器的支持。

我测试了这张图片：
Firefox 42.0
IE 11
铬46

＆＃13;

＆＃13;

.text {
  font-size: 10px;
}

＆＃13;

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 125 125" width="50%">
  <title>Orange speech buble</title>
  <desc>Created for answering a question on stack overflow</desc>
  <defs id="defs3338">
    <linearGradient id="linearGradient4154">
      <stop id="stop4156" offset="0" style="stop-color:#e1b800;stop-opacity:1" />
      <stop id="stop4158" offset="1" style="stop-color:#ffffff;stop-opacity:1" />
    </linearGradient>
    <linearGradient gradientTransform="translate(1.5152288,-5.0507627)" gradientUnits="userSpaceOnUse" y2="951.2207" x2="41.163715" y1="1011.5774" x1="57.831238" id="linearGradient4160" xlink:href="#linearGradient4154" />
    <linearGradient gradientTransform="translate(-1.5152288,-4.2931483)" gradientUnits="userSpaceOnUse" y2="1009.6832" x2="51.26524" y1="1022.0576" x1="57.073616" id="linearGradient4170" xlink:href="#linearGradient4154" />
    <linearGradient gradientTransform="translate(1.5152288,-5.0507627)" gradientUnits="userSpaceOnUse" y2="1029.1357" x2="62.160976" y1="1029.1357" x1="43.221054" id="linearGradient4180" xlink:href="#linearGradient4154" />
  </defs>
  <g transform="translate(0,-927.36222)" id="layer1">
    <path d="m 48.992399,1015.4916 13.637059,6.8185 -17.172593,10.1016 z" style="fill:url(#linearGradient4180);" />
    <path d="m 37.628182,1015.2391 25.001276,7.071 -9.848988,-13.8896 z" style="fill:url(#linearGradient4170);" />
    <path d="m 55.305852,953.36727 -21.213203,8.33376 -12.374369,27.52666 15.909903,25.50631 55.55839,-7.3236 7.576147,-14.39464 -0.75762,-18.43528 -9.596447,-13.38453 z" style="fill:url(#linearGradient4160);" />
    <text y="985" x="34" class="text" xml:space="preserve">Your text here</text>
  </g>
</svg>

＆＃13;

＆＃13;

＆＃13;