CSS Squircle Generator - สี่เหลี่ยมโค้งมน
ออกแบบรัศมีเส้นขอบ CSS ด้วยสายตา: แถบเลื่อนมุมอิสระสี่ตัวในหน่วย px หรือเปอร์เซ็นต์ ทางลัดสำหรับลิงก์ทุกมุมสำหรับแวดวงและเม็ดยาทันที รวมถึงโหมด Blob แบบออร์แกนิกที่มีรูปร่างแบบสุ่ม
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างรัศมีเส้นขอบโดยเชื่อมโยงทั้งสี่มุมที่ 30% ซึ่งเป็นการปัดเศษปานกลางที่อยู่ระหว่างสี่เหลี่ยมจัตุรัสคมและวงกลมเต็ม มันไม่ใช่รูปวงกลมทางคณิตศาสตร์ที่แท้จริง (superellipse) แต่เป็นคุณสมบัติที่ใกล้เคียงที่สุดที่คุณสมบัติ CSS เดียวจะได้รับ และเป็นคุณค่าที่ระบบการออกแบบส่วนใหญ่เข้าถึงได้เมื่อพวกเขาต้องการรูปลักษณ์นั้น
ชื่อนี้มาจากไอคอนแอปรูปสี่เหลี่ยมจัตุรัสที่ iOS นิยมใช้ โดยมีเส้นโค้งเพียงพอในแต่ละมุมเพื่อให้รู้สึกนุ่มนวลและเป็นมิตร แต่ไม่มากจนเกินไปจนรูปร่างอ่านเป็นทรงกลม ชิ้นส่วนไอคอน รูปขนาดย่อของการ์ด และกรอบอวตารสมัยใหม่ล้วนอาศัยรัศมีในช่วงคร่าว ๆ เดียวกันนี้ด้วยเหตุผลดังกล่าว
เลื่อนแถบเลื่อนที่เชื่อมโยงขึ้นเพื่อให้รู้สึกนุ่มนวลและเป็นวงกลมมากขึ้น หรือเลื่อนลงเพื่อให้ได้ภาพที่คมชัดและเป็นรูปสี่เหลี่ยมมากขึ้น — บรรทัด CSS จะอัปเดตทุกการเปลี่ยนแปลง พร้อมที่จะคัดลอกเมื่อรู้สึกว่าเส้นโค้งเหมาะกับไอคอนหรือการ์ดของคุณ