时间戳

首页 > 解决方案 > 排列背景 SVG

html - 排列背景 SVG

问题描述

我正在尝试使用 3 个 svg 图像创建响应式背景，但在组织它们时遇到了麻烦。
我尝试在每个图像上使用类似于下面的 css，但是当我调整浏览器大小时它搞砸了。

z-index: -1;
position: absolute;
left: 60vw;
top: -50vh;


<div>

  <svg class="circ" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 593.13 593.13">
    <path
        id="Path_1"
        data-name="Path 1"
d="M296.565,0C460.353,0,593.13,132.777,593.13,296.565S460.353,593.13,296.565,593.13,0,460.353,0,296.565,132.777,0,296.565,0Z"
        fill="#f16161"/>
  </svg>
  <svg class="rightTri" xmlns="http://www.w3.org/2000/svg" width="1235" height="980" viewBox="0 0 1235 980">
  <path id="Polygon_1" data-name="Polygon 1" d="M617.5,0,1235,980H0Z" fill="#81ecb7"/>
  </svg>


  <svg class="topLeftTri" xmlns="http://www.w3.org/2000/svg" width="1490.697" height="1398.557" viewBox="0 0 1490.697 1398.557">
    <path id="Polygon_3" data-name="Polygon 3" d="M264.738,73.677c2.846-15.239,24.677-15.239,27.524,0L553.9,1474.429A14,14,0,0,1,540.143,1491H16.857A14,14,0,0,1,3.1,1474.429Z" transform="translate(1490.697 978.184) rotate(131)" fill="#81ecb7"/>
  </svg>

  <svg class="bottomLeftTri" xmlns="http://www.w3.org/2000/svg" width="1533.641" height="1327.01" viewBox="0 0 1533.641 1327.01">
    <path id="Polygon_2" data-name="Polygon 2" d="M278.5,0,557,1491H0Z" transform="matrix(0.588, 0.809, -0.809, 0.588, 1206.244, 0)" fill="#81ecb7"/>
  </svg>

</div>

这就是我试图创造的

网站## 标题##

标签： htmlcssbackground

解决方案

如果有兴趣，只能使用 CSS 解决方案：

html {
  min-height:100%;
  
  background:
    radial-gradient(circle     at calc(70% - 40px) calc(35% - 40px),#f16161 8px,transparent 9px),
    conic-gradient(from -60deg at calc(70% - 40px) calc(35% - 40px),#81ecb7 0deg 30deg,transparent 30.2deg),
    radial-gradient(circle     at 70% 35%,#f16161 80px,transparent 81px),
    conic-gradient(            at 70% 35%,#1d2534 30deg,#81ecb7 31deg 90deg,#1d2534 90.1deg 220deg,#81ecb7 220.05deg 240deg,#1d2534 240.1deg);
}

推荐阅读