创建特定的 div 形状（如带尾巴的多边形）

Question

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

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

我能够通过 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%);
}

Answer 1

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

与其变得如此复杂，不如使用几个元素，其中一个用于顶部的多边形，另一个用于底部的尾巴部分。

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

向主容器 div 添加两个 pseudo-elements。 :before pseudo-element 将在顶部形成多边形，:after 将在底部形成尾巴。
需要两个伪元素，因为如果我们将 parent 元素本身剪裁成多边形，那么由于 parent.
放置 :after pseudo-element 使其 bottom 和 left 与多边形上最低点的坐标匹配。
将background以linear-gradient的形式添加到多边形pseudo-element和像pseudo-element这样的尾部。
:after pseudo-element 旋转了 -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>

下面的代码片段使用 clip-path 的 url() 语法以及内联 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 这样做的优点是：
每条路径都有一个梯度，因此很容易跟踪。
你只需要树元素来绘制主要形状。
所有主流浏览器都支持它。

我在以下位置测试了这张图片：
火狐 42.0
IE 11
chrome 46

.text {
  font-size: 10px;
}

<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>

创建特定的 div 形状（如带尾巴的多边形）

Creating a specific div shape (like a polygon with a tail)

html

css

css-shapes

SVG