Saya memiliki tata letak dengan sejumlah kurva berbeda untuk diterapkan ke bagian atas dan / atau bawah kotak lebar penuh. Saya hampir sampai, menggunakan elemen SVG Clippation dengan Clippatis = "ObjectBoundingBox" ...

0
Steve Taylor 5 April 2021, 17:41

1 menjawab

Jawaban Terbaik

Gunakan sebagai topeng dan tentukan lebarnya menjadi 100% dan auto tinggi

.box {
  height: 200px; /* this can be any height and it won't affect the curvature */
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1"><path d="M0 0.00880688C0 0.00880688 0.101517 -0.0152445 0.276014 0.0161458C0.474915 0.0519263 0.605365 0.0594333 0.727565 0.0493416C0.83584 0.0403992 1 0.0124763 1 0.0124763V1H0V0.00880688Z" fill="black"/></svg>') 
    top/100% auto no-repeat;
  background:red;
}
<div class="box"></div>

Anda juga dapat mempertimbangkan ketinggian tetap tetapi Anda perlu menggunakan preserveAspectRatio="none"

.box {
  height: 200px; /* this can be any height and it won't affect the curvature */
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1"><path d="M0 0.00880688C0 0.00880688 0.101517 -0.0152445 0.276014 0.0161458C0.474915 0.0519263 0.605365 0.0594333 0.727565 0.0493416C0.83584 0.0403992 1 0.0124763 1 0.0124763V1H0V0.00880688Z" fill="black"/></svg>') 
    top/100% 1000px no-repeat;
    /*        ^--- adjust this like you want (at least bigger than the height) */
  background:red;
}
<div class="box"></div>
1
Temani Afif 5 April 2021, 15:12