主页 / 问题 / 683410
Accepted
Fangog
Asked:2020-06-25 05:43:41 +0000 UTC2020-06-25 05:43:41 +0000 UTC

如何布局内容为“弯曲”形状的块？

  • 772

有这样一个有内容的块，它的宽度可以缩小一点（200 像素），高度可以缩小一点

是否有可能以某种方式撰写它而不用借助图片的拐杖？在 CSS3 中，多边形似乎在其他任何地方都不起作用。

html

2 个回答

  1. Best Answer

    像这样制作背景 svg：

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610 380" width="100%" height="100%" preserveAspectRatio="none">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#121c37;" />
      <stop offset="100%" style="stop-color:#18283d;" />
    </linearGradient>
  </defs>
  <g transform="translate(0,380) scale(0.1,-0.1)" fill="url(#gradient1)">
    <path d="M80 2087 l0 -1652 153 -153 152 -152 2595 0 2595 0 153 153 152 152
0 1653 0 1652 -424 0 -424 0 -32 -50 -32 -50 -488 0 -489 0 -28 50 -28 50
-955 0 -956 0 -29 -50 -29 -50 -491 0 -490 0 -28 50 -28 50 -425 0 -424 0 0
-1653z" />
  </g>
</svg>

    为了使 SVG 流畅，请注意代码width="100%" height="100%" preserveAspectRatio="none"。

    SVG 最好作为一个单独的文件来完成（首选方式），但也可以作为值的一部分来完成background（警告，下面的代码只适用于 webkit 浏览器！）：

    div {
  width: 250px;
  height: 250px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 610 380" preserveAspectRatio="none"><defs><linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#121c37;" /><stop offset="100%" style="stop-color:#18283d;" /></linearGradient></defs><g transform="translate(0,380) scale(0.1,-0.1)" fill="url(#gradient1)"><path d="M80 2087 l0 -1652 153 -153 152 -152 2595 0 2595 0 153 153 152 152 0 1653 0 1652 -424 0 -424 0 -32 -50 -32 -50 -488 0 -489 0 -28 50 -28 50 -955 0 -956 0 -29 -50 -29 -50 -491 0 -490 0 -28 50 -28 50 -425 0 -424 0 0 -1653z" /></g></svg>');
}
    <div></div>

    为了使代码在 MS Edge 和 Firefox 中工作，url 中的字符必须在 utf8 编码后进行转义，所以让我们用单引号替换双引号，#with%23和%with %25：

    div {
  width: 250px;
  height: 250px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 610 380' preserveAspectRatio='none'><defs><linearGradient id='gradient1' x1='0%25' y1='0%25' x2='0%25' y2='100%25'><stop offset='0%25' style='stop-color:%23121c37;' /><stop offset='100%25' style='stop-color:%2318283d;' /></linearGradient></defs><g transform='translate(0,380) scale(0.1,-0.1)' fill='url(%23gradient1)'><path d='M80 2087 l0 -1652 153 -153 152 -152 2595 0 2595 0 153 153 152 152 0 1653 0 1652 -424 0 -424 0 -32 -50 -32 -50 -488 0 -489 0 -28 50 -28 50 -955 0 -956 0 -29 -50 -29 -50 -491 0 -490 0 -28 50 -28 50 -425 0 -424 0 0 -1653z' /></g></svg>");
  background-size: 100% 100%;  /* Фикс для Firefox, чтобы изображение корректно растягивалось */
}
    <div></div>

    此外，为了在 Firefox 中正确缩放，添加background-size: 100% 100%;.

    • 5

  2. 设计师给了我一个渐变更正确的版本，hastebin.com/uhujufuyey.xml 如何学习涂胶呢？

    为了使 svg 具有自适应性，您需要从 svg 文件的标题中删除属性viewport，也就是说，在您的示例中，您需要从设计器中删除width="1380px" height="865px"。只保留 viewBox - viewBox="0 0 2760 1730"。您可以在此处阅读它们如何影响svgviewport的viewBox缩放和适应性

    如果未指定viewport (width, height)，它们默认为相等。 width="100%" height="100%"

    在下面的示例中，svg 图像直接（内联）添加到 HTML 页面。

    在 Chrome、Firefox、Opera 中测试了形状适应性。在 IE11 中，形状没有响应。

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2760 1730" version="1">
  <defs>
    <linearGradient x1="0" y1="0" x2="100" y2="100" id="linearGradient-1">
      <stop stop-color="#102036" stop-opacity="1" offset="0" />
      <stop stop-color="#0C1830" offset="50" />
      <stop stop-color="#1A2042" stop-opacity="1" offset="100" />
    </linearGradient>
    <path d="M0 784L0 0 1370 0 1370 784 1370 784 1299 855 1299 855 70 855 70 855 0 784ZM200 0L214 25 445 25 460 0 200 0ZM910 0L924 25 1155 25 1170 0 910 0Z" id="path-2" />
    <filter x="-4" y="-1" width="108" height="107" filterUnits="objectBoundingBox" id="filter-3">
      <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
      <feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
      <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
      <feColorMatrix values="0" type="matrix" in="shadowBlurOuter1" />
    </filter>
  </defs>
  <g id="WEB" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="MAIN" transform="translate(-270.000000, -747.000000)">
      <g id="BLOCK" transform="translate(275.000000, 750.000000)">
        <g id="BG">
          <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2" />
          <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2" />
          <path stroke-opacity="0" stroke="#FFFFFF" stroke-width="1" d="M1 1L1 0 0 1 1 1ZM1370 1L1370 1 1370 0 1370 1ZM1370 784L1370 784 1370 784 1370 784 1370 783 1370 784ZM1299 855L1298 855 1299 855 1299 855 1299 855 1299 855ZM71 855L70 855 70 855 70 855 71 855 71 855ZM1 784L0 784 1 784 1 784ZM1 784L1 1 1370 1 1370 784 1299 855 71 855 1 784ZM214 26L199 0 461 0 445 26 214 26ZM909 0L1171 0 1155 26 924 26 909 0Z" />
        </g>
      </g>
    </g>
  </g>
</svg>

    • 4

相关问题