พื้นหลังวาดแบบไดนามิกใน CSS

ขณะนี้ฉันกำลังพยายามใช้พื้นหลังที่วาดไว้ดังที่แสดงในแนวคิดนี้: แบบร่างเว็บไซต์

ขณะนี้ฉันกำลังใช้คลาส bootstraps container เพื่อจัดกึ่งกลางและจัดแนวเนื้อหาของฉัน ฉันจะวางตำแหน่ง SVG บางส่วนให้อยู่ระหว่างเบรกพอยต์ด้านนอกและด้านข้างของวิวพอร์ตได้อย่างไร (ตามที่แสดงในภาพวาด)

ฉันพบวิธีแก้ปัญหาด้วยภาพพื้นหลังแบบติดหนึบแล้ว ตามที่อธิบายไว้ในโพสต์นี้ แต่นั่นก็คือ ไม่ใช่เป้าหมายของฉัน ฉันกำลังพยายามเพิ่มประสิทธิภาพสูงสุดและใช้กราฟิกแบบเวกเตอร์ (หรือแม้แต่แคนวาสก็ได้)


person DeveloperTK    schedule 20.08.2020    source แหล่งที่มา
comment
มันควรจะลงไปไกลแค่ไหน? ถึงจุดหนึ่ง bg จะเป็นสีดำสนิท แบ่งปันรหัสของคุณกับสิ่งที่คุณได้ทำไปแล้ว และชี้แจงว่า bg ควรครอบคลุมพื้นที่ใด การไล่ระดับสีเชิงเส้นเส้นเดียวจะทำงานนั้นได้จริง background: linear-gradient(75deg, #000 12.5%, #0000 12.6%, #0000 16%, #000 16.1%, #000 18%, #0000 18.1%,#0000 80%, #000 80.1%, #000 82%, #0000 82.1% , #0000 85%, #000 85.1%, #000 87%, #0000 87.1%, #0000 90%, #000 90.1%)}   -  person G-Cyrillus    schedule 21.08.2020
comment
เส้นพื้นหลังควรคงที่ในมุมมองเพื่อไม่ให้ข้ามเนื้อหา   -  person DeveloperTK    schedule 21.08.2020