มีตัวเลือกกล่องอ้างอิงอยู่ 2-3 ตัวเลือกให้เลือก ได้แก่ "margin-box", "border-box", "padding-box" และ "content-box" ชื่อของทั้งสองช่องจะสื่อถึงขอบเขตของขอบเขตเหล่านั้น ก่อนหน้านี้เราได้อธิบายเกี่ยวกับ "มาร์จิน-กล่อง" "กล่องเส้นขอบ" ถูกจำกัดโดยขอบด้านนอกของเส้นขอบขององค์ประกอบ ส่วน "กล่องระยะห่างจากขอบ" จะถูกจำกัดโดยระยะห่างจากขอบขององค์ประกอบ ขณะที่ "กล่องเนื้อหา" จะเหมือนกับพื้นที่จริงที่เนื้อหาใช้ภายในองค์ประกอบหนึ่ง
ใช้ช่องอ้างอิงสำหรับการประกาศ shape-outside
ได้ครั้งละ 1 ช่องเท่านั้น ช่องอ้างอิงแต่ละช่องจะมีอิทธิพลต่อรูปร่างต่างๆ และบางครั้งก็มีลักษณะที่บอบบาง มีบทความอื่นที่เจาะลึกมากขึ้นและช่วยคุณเข้าใจกล่องอ้างอิงสำหรับรูปร่าง CSS
ฟังก์ชันวงรี()
วงรีมีลักษณะเหมือนวงกลมแบบย่อ มีการกำหนดเป็น ellipse(rx ry at cx cy)
โดยที่ rx
และ ry
คือรัศมีสำหรับวงรีในแกน X และแกน Y ส่วน cx
และ cy
เป็นพิกัดสำหรับจุดศูนย์กลางของวงรี
.element{
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
ค่าเปอร์เซ็นต์จะคํานวณจากมิติข้อมูลของระบบพิกัด ไม่ต้องใช้โจทย์เลขตลกๆ เลย คุณสามารถละเว้นพิกัดสำหรับจุดศูนย์กลางวงรี และจะถูกอนุมานจากศูนย์กลางของระบบพิกัด
อาจกำหนดรัศมีบนแกน X และ Y ได้ด้วยคีย์เวิร์ด เช่น farthest-side
จะให้รัศมีเท่ากับระยะทางระหว่างจุดศูนย์กลางวงรีและด้านข้างของกล่องอ้างอิงที่ไกลที่สุด ขณะที่ closest-side
หมายถึงสิ่งที่ตรงกันข้าม โดยใช้ระยะทางที่สั้นที่สุดระหว่างจุดศูนย์กลางและด้าน
.element{
shape-outside: ellipse(closest-side farthest-side at 50% 50%);
/* identical to: */
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
วิธีนี้อาจมีประโยชน์เมื่อขนาดขององค์ประกอบ (หรือกล่องอ้างอิง) อาจเปลี่ยนแปลงในลักษณะที่คาดเดาไม่ได้ แต่คุณก็ต้องการให้รูปร่างวงรีปรับเปลี่ยนได้
นอกจากนี้ยังสามารถใช้คีย์เวิร์ด farthest-side
และ closest-side
เดียวกันสำหรับรัศมีในฟังก์ชันรูปร่าง circle()
ได้อีกด้วย
ฟังก์ชันรูปหลายเหลี่ยม()
หากวงกลมและจุดไข่ปลามีขีดจำกัดมากเกินไป ฟังก์ชันรูปร่างรูปหลายเหลี่ยมจะเปิดโลกแห่งตัวเลือก รูปแบบคือ polygon(x1 y1, x2 y2, ...)
ซึ่งคุณระบุคู่ของพิกัด x y สำหรับจุดยอดแต่ละจุด (จุด) ของรูปหลายเหลี่ยม จำนวนคู่ขั้นต่ำในการระบุรูปหลายเหลี่ยมคือ 3 รูป คือสามเหลี่ยม
.element{
shape-outside: polygon(0 0, 0 300px, 300px 600px);
width: 300px;
height: 600px;
}
จุดยอดวางบนระบบพิกัด สำหรับรูปหลายเหลี่ยมที่ปรับเปลี่ยนตามอุปกรณ์ คุณสามารถใช้ค่าเปอร์เซ็นต์สำหรับพิกัดบางส่วนหรือทั้งหมด
.element{
/* polygon responsive to font-size*/
shape-outside: polygon(0 0, 0 100%, 100% 100%);
width: 20em;
height: 40em;
}
มีพารามิเตอร์ fill-rule
(ไม่บังคับ) นำเข้าจาก SVG ซึ่งจะบอกวิธีพิจารณา "ภายใน" ของรูปหลายเหลี่ยมในกรณีที่เป็นเส้นทางที่ตัดกันเองหรือรูปร่างที่ล้อมรอบ Joni Trithall อธิบายวิธีการทำงานของพร็อพเพอร์ตี้กฎการเติมสี ใน SVG ได้เป็นอย่างดี หากไม่ได้กำหนดไว้ fill-rule
จะมีค่าเริ่มต้นเป็น nonzero
.element{
shape-outside: polygon(0 0, 0 100%, 100% 100%);
/* identical to: */
shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}
ฟังก์ชัน inset()
ฟังก์ชันรูปร่าง inset()
ช่วยให้คุณสร้างรูปร่างสี่เหลี่ยมผืนผ้าเพื่อตัดเนื้อหาได้ สิ่งนี้อาจฟังดูขัดกับเหตุผลเบื้องต้นที่ว่า CSS สร้างเนื้อหาเว็บที่ไม่มีค่าใช้จ่ายจากช่องที่เรียบง่าย ก็อาจจะน่าสนใจด้วย ฉันยังไม่พบ Use Case สำหรับ inset()
ซึ่งยังใช้กับ Float และ ระยะขอบ หรือ polygon()
ไม่ได้ แม้ว่า inset()
จะให้นิพจน์ที่อ่านได้สำหรับรูปทรงสี่เหลี่ยมผืนผ้ามากกว่า polygon()
สัญกรณ์แบบเต็มสำหรับฟังก์ชันรูปร่างส่วนแทรกคือ inset(top right bottom left border-radius)
อาร์กิวเมนต์ 4 ตำแหน่งแรกเป็นออฟเซ็ตจากขอบขององค์ประกอบ อาร์กิวเมนต์สุดท้ายคือรัศมีเส้นขอบสำหรับรูปร่างสี่เหลี่ยมผืนผ้า คุณไม่จำเป็นต้องกรอกข้อมูลนี้ก็ได้ ดังนั้นคุณสามารถยกเว้นได้ ซึ่งเป็นไปตามสัญลักษณ์ชวเลข border-radius
ที่คุณใช้ใน CSS อยู่แล้ว
.element{
shape-outside: inset(100px 100px 100px 100px);
/* yields a rectangular shape which is 100px inset on all sides */
float: left;
}
การสร้างรูปร่างจากกล่องอ้างอิง
หากไม่ระบุฟังก์ชันรูปร่างในคุณสมบัติ shape-outside
คุณจะอนุญาตให้เบราว์เซอร์ดึงรูปร่างจากช่องอ้างอิงขององค์ประกอบได้ กล่องอ้างอิงเริ่มต้นคือ margin-box
ยังไม่มีอะไรแปลกใหม่เลย นี่แหละที่เรียกว่าห่วงใยอยู่แล้ว แต่เมื่อใช้เทคนิคนี้ คุณจะสามารถนำเรขาคณิตขององค์ประกอบมาใช้ซ้ำได้ มาดูพร็อพเพอร์ตี้ border-radius
กัน
หากใช้วงกลมเพื่อปัดเศษมุมขององค์ประกอบที่ลอยอยู่ คุณจะได้รับเอฟเฟกต์ตัดออก แต่พื้นที่แบบลอยจะยังคงเป็นรูปสี่เหลี่ยมผืนผ้า เพิ่ม shape-outside: border-box
เพื่อล้อมรอบรูปร่างที่สร้างโดย border-radius
.element{
border-radius: 50%;
shape-outside: border-box;
float: left;
}
แน่นอนว่า คุณสามารถใช้ช่องอ้างอิงทั้งหมดในลักษณะนี้ได้ ตัวอย่างการใช้งานรูปร่างที่ได้มามีดังนี้ - เครื่องหมายคำพูดแบบออฟเซ็ต
คุณอาจสร้างเอฟเฟ็กต์การดึงการเสนอราคาตามออฟเซ็ตได้โดยใช้คุณสมบัติการลอยและส่วนต่างกำไรเท่านั้น แต่คุณจะต้องจัดตำแหน่งองค์ประกอบเครื่องหมายคำพูดในโครงสร้าง HTML ในจุดที่คุณต้องการให้แสดงผล
วิธีการรับเอฟเฟ็กต์การดึงข้อความออฟเซ็ตเดียวกันที่มีความยืดหยุ่นมากขึ้นมีดังนี้
.pull-quote{
shape-outside: content-box;
margin-top: 200px;
float: left;
}
เราตั้งค่ากล่องอ้างอิง content-box
สำหรับระบบพิกัดของรูปร่างอย่างชัดเจน ในกรณีนี้ จำนวนเนื้อหาในข้อความที่ยกมาเป็นตัวกำหนดรูปร่างที่เนื้อหาภายนอกจะตัดขึ้น พร็อพเพอร์ตี้ margin-top
ใช้ที่นี่เพื่อจัดตำแหน่ง (ออฟเซ็ต) การดึงเครื่องหมายคำพูด โดยไม่คำนึงถึงตำแหน่งในโครงสร้าง HTML
ขอบรูปร่าง
คุณจะสังเกตเห็นว่าการรวมเนื้อหาไว้รอบรูปร่างอาจทำให้เนื้อหาถูกับองค์ประกอบมากเกินไป คุณเพิ่มระยะห่างรอบๆ รูปร่างได้ด้วยคุณสมบัติ shape-margin
.element{
shape-outside: circle(40%);
shape-margin: 1em;
float: left;
}
เอฟเฟกต์คล้ายกับที่คุณคุ้นเคยจากการใช้พร็อพเพอร์ตี้ margin
ปกติ แต่ shape-margin
จะส่งผลต่อพื้นที่รอบๆ ค่า shape-outside
เท่านั้น ซึ่งจะเป็นการเพิ่มระยะห่างรอบๆ รูปร่างก็ต่อเมื่อระบบมีที่ว่างสำหรับรูปร่างนั้นๆ ดังนั้นในตัวอย่างข้างต้น รัศมีของวงกลมจึงตั้งค่าเป็น 40% ไม่ใช่ 50% หากตั้งค่ารัศมีเป็น 50% วงกลมดังกล่าวจะใช้พื้นที่ทั้งหมดในระบบพิกัดไป ทำให้ไม่มีเนื้อที่ว่างสำหรับผลของ shape-margin
อย่าลืมว่าท้ายที่สุดแล้ว รูปร่างจะถูกจํากัดไว้ที่ margin-box
ขององค์ประกอบ (องค์ประกอบบวกกับ margin
อยู่รอบๆ) หากรูปร่างใหญ่ขึ้นและเกินเข้ามา ระบบจะตัดรูปร่างไปเป็น margin-box
และคุณจะได้รูปร่างสี่เหลี่ยมผืนผ้า
โปรดทราบว่า shape-margin
ยอมรับค่าบวกเพียงค่าเดียว โดยไม่มีเครื่องหมายระบุยาว แล้วรูปร่างขอบด้านบนสำหรับวงกลมคืออะไร
การทำให้รูปร่างเคลื่อนไหว
โดยคุณจะผสมผสานรูปร่าง CSS กับฟีเจอร์ CSS อื่นๆ อีกมากมายได้ เช่น การเปลี่ยนและภาพเคลื่อนไหว แม้ว่าเราจะต้องเน้นย้ำว่าผู้ใช้จะรู้สึกรำคาญใจเมื่อเลย์เอาต์ข้อความเปลี่ยนไปในขณะที่กำลังอ่าน โปรดให้ความสนใจกับประสบการณ์การใช้งานของคุณอย่างละเอียดหากคุณต้องการทำให้รูปร่างเคลื่อนไหว
คุณทำให้รัศมีและศูนย์กลางของรูปร่าง circle()
และ ellipse()
เคลื่อนไหวได้ ตราบใดที่กำหนดไว้ในค่าที่เบราว์เซอร์ประมาณค่าได้ เป็นไปได้ที่จะเปลี่ยนจาก circle(30%)
ไป circle(50%)
อย่างไรก็ตาม ภาพเคลื่อนไหวระหว่าง circle(closest-side)
ถึง circle(farthest-side)
จะทำให้เบราว์เซอร์ขาดตอน
.element{
shape-outside: circle(30%);
transition: shape-outside 1s;
float: left;
}
.element:hover{
shape-outside: circle(50%);
}
ผลกระทบที่น่าสนใจมากขึ้นสามารถเกิดขึ้นได้เมื่อทำให้รูปร่าง polygon()
เคลื่อนไหว โปรดทราบว่ารูปหลายเหลี่ยมต้องมีจุดยอดมุมระหว่าง 2 สถานะนี้เท่าๆ กัน เบราว์เซอร์จะไม่สามารถประมาณค่าหากคุณเพิ่มหรือนำจุดยอดออก
เคล็ดลับอย่างหนึ่งคือการเพิ่มจุดยอดสูงสุดที่คุณต้องการ แล้วจัดตำแหน่งให้อยู่ในกลุ่มเดียวกันในสถานะภาพเคลื่อนไหวซึ่งคุณต้องการให้มีขอบที่รับรู้ได้น้อยลงในรูปร่าง
.element{
/* four vertices (looks like rectangle) */
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: shape-outside 1s;
}
.element:hover{
/* four vertices, but second and third overlap (looks like triangle) */
shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}
การรวมเนื้อหาภายในรูปร่าง
ฉบับร่างเริ่มต้นของข้อกำหนดรูปร่าง CSS มีพร็อพเพอร์ตี้ shape-inside
ที่ช่วยให้คุณตัดเนื้อหาไว้ในรูปร่างได้ และยังมีการติดตั้งใช้งานใน Chrome และ Webkit มาระยะหนึ่งแล้วอีกด้วย แต่การรวมเนื้อหาที่จัดวางตำแหน่งเองภายในเส้นทางที่กำหนดเองต้องอาศัยความพยายามและการวิจัยมากขึ้นเพื่อให้ครอบคลุมสถานการณ์ที่เป็นไปได้ทั้งหมดและหลีกเลี่ยงข้อบกพร่อง ด้วยเหตุนี้ พร็อพเพอร์ตี้ shape-inside
จึงถูกเลื่อนเวลาเป็นรูปร่าง CSS ระดับ 2 และการใช้งานสำหรับพร็อพเพอร์ตี้ดังกล่าวถูกเพิกถอนไป
อย่างไรก็ตาม คุณจะยังคงได้รับผลของการรวมเนื้อหาไว้ในรูปร่างที่กำหนดเอง โดยใช้ความพยายามเล็กน้อยและมีความประนีประนอมเล็กน้อย เคล็ดลับก็คือการใช้องค์ประกอบแบบลอย 2 รายการที่มี shape-outside
ซึ่งอยู่ในตำแหน่งตรงกันข้ามของคอนเทนเนอร์ องค์ประกอบที่ประนีประนอมคือ คุณต้องใช้องค์ประกอบว่าง 1 หรือ 2 รายการซึ่งไม่มีความหมายตามความหมาย แต่จะใช้เป็นโครงเพื่อสร้างภาพลวงตาว่ารูปร่างภายในได้
<div>
<div class='left-shape'></div>
<div class='right-shape'></div>
Lorem ipsum...
</div>
ตำแหน่งขององค์ประกอบ Stut .left-shape
และ .right-shape
ที่ด้านบนของคอนเทนเนอร์มีความสำคัญ เนื่องจากองค์ประกอบดังกล่าวจะลอยไปทางด้านซ้ายและขวาเพื่อขนาบเนื้อหา
.left-shape{
shape-outside: polygon(0 0, ...);
float: left;
width: 50%;
height: 100%;
}
.right-shape{
shape-outside: polygon(50% 0, ...);
float: right;
width: 50%;
height: 100%;
}
การจัดรูปแบบนี้ทำให้สตรัทที่ลอยอยู่ทั้ง 2 ชิ้นใช้พื้นที่ทั้งหมดภายในองค์ประกอบนั้น แต่พร็อพเพอร์ตี้ shape-outside
จะช่วยตัดพื้นที่สำหรับเนื้อหาที่เหลือ
หากเบราว์เซอร์ไม่สนับสนุนรูปร่าง CSS จะทำให้เกิดผลน่าเกลียดโดยการดันเนื้อหาทั้งหมดลง นั่นคือเหตุผลว่าทำไมการใช้ฟีเจอร์นี้อย่างต่อเนื่องจึงเป็นเรื่องสำคัญ
ในตัวอย่างภาพเคลื่อนไหวของรูปร่างก่อนหน้า คุณจะเห็นว่าข้อความที่สลับไปมานั้นสร้างความรำคาญ กรณีการใช้งานบางรายการอาจไม่รองรับรูปร่างที่เคลื่อนไหว แต่คุณสามารถทำให้พร็อพเพอร์ตี้อื่นๆ ที่โต้ตอบกับรูปร่าง CSS เคลื่อนไหวเพื่อเพิ่มเอฟเฟกต์ในพื้นที่ที่เหมาะสมได้
ในการสาธิตรูปร่าง CSS ของอลิซในแดนมหัศจรรย์ เราใช้ตำแหน่งการเลื่อนเพื่อเปลี่ยนระยะขอบด้านบนของเนื้อหา โดยข้อความจะถูกบีบระหว่างองค์ประกอบที่ลอยอยู่ 2 รายการ เมื่อเลื่อนลง องค์ประกอบจะต้องรีเลย์ตาม shape-outside
ขององค์ประกอบแบบลอยทั้ง 2 รายการ ซึ่งทำให้ดูเหมือนว่าข้อความจะจมลงลึกยิ่งขึ้น และช่วยเพิ่มประสบการณ์การเล่าเรื่องอีกด้วย เป็นการเสี่ยงต่อการละเมิดโดยใช่เหตุหรือไม่ อาจจะได้ แต่มันดูเจ๋งดีนะ
เนื่องจากรูปแบบข้อความสร้างขึ้นโดยเบราว์เซอร์ ประสิทธิภาพจึงดีกว่าการใช้โซลูชัน JavaScript แต่การเปลี่ยนระยะขอบบนเมื่อเลื่อนจะทริกเกอร์เหตุการณ์รีเลย์และแสดงผลเป็นจำนวนมาก ซึ่งอาจลดประสิทธิภาพลงอย่างเห็นได้ชัด โปรดใช้ด้วยความระมัดระวัง อย่างไรก็ตาม การใช้รูปร่าง CSS โดยไม่ทำให้เคลื่อนไหวไม่ได้มาพร้อมกับ Hit ด้านประสิทธิภาพที่รับรู้ได้
การเพิ่มประสิทธิภาพแบบต่อเนื่อง
เริ่มต้นด้วยการสมมติว่าเบราว์เซอร์ไม่รองรับรูปร่าง CSS และต่อยอดขึ้นมาเมื่อคุณตรวจพบฟีเจอร์ Modernizr เป็นโซลูชันที่ดีในการตรวจหาฟีเจอร์ และมีการทดสอบสำหรับรูปร่าง CSS ในส่วน "ตรวจพบที่ไม่ใช่แกนหลัก"
บางเบราว์เซอร์มีการตรวจหาฟีเจอร์ใน CSS ผ่านกฎ @supports
โดยไม่จำเป็นต้องใช้ไลบรารีภายนอก Google Chrome ที่รองรับรูปร่าง CSS ด้วยจะเข้าใจกฎ @supports
นี่คือวิธีที่คุณจะใช้เพื่อเพิ่มประสิทธิภาพให้กับวิดีโออีกแบบ
.element{
/* styles for all browsers */
}
@supports (shape-outside: circle(50%)){
/* styles only for browsers which support CSS Shapes */
.element{
shape-outside: circle(50%);
}
}
Lea Verou ได้เขียนเพิ่มเติมเกี่ยวกับวิธีใช้กฎ @supports ของ CSS
คำอธิบายจากการยกเว้น CSS
สิ่งที่เรารู้กันในปัจจุบันในฐานะรูปร่าง CSS มีชื่อเรียกว่า "การยกเว้นและรูปร่าง CSS" ในช่วงแรกๆ ของข้อกำหนด การเปลี่ยนการตั้งชื่ออาจดูแตกต่างกันเล็กน้อย แต่ที่จริงแล้วข้อมูลนี้มีความสำคัญมาก การยกเว้น CSS ซึ่งปัจจุบันเป็นข้อกำหนดที่แยกต่างหากช่วยให้สามารถรวมเนื้อหาไว้รอบๆ องค์ประกอบที่จัดวางตำแหน่งได้อย่างอิสระ โดยไม่ต้องใช้พร็อพเพอร์ตี้แบบลอย ลองจินตนาการถึงการรวมเนื้อหาไว้รอบองค์ประกอบที่มีตำแหน่งแน่นอน เป็นกรณีการใช้งานสำหรับการยกเว้น CSS รูปร่าง CSS จะกําหนดเส้นทางการรวมเนื้อหาเท่านั้น
ดังนั้น รูปร่างและการยกเว้นจึงแตกต่างกัน แต่ส่งเสริมซึ่งกันและกัน รูปร่าง CSS มีให้บริการในเบราว์เซอร์ในปัจจุบัน แต่ยังไม่มีการนำการยกเว้น CSS มาใช้กับการโต้ตอบกับรูปร่าง
คุณสร้างเส้นทางในเครื่องมือสร้างรูปภาพแบบคลาสสิกได้ แต่จะไม่มีเส้นทางในขณะที่เขียน ซึ่งจะส่งออกไวยากรณ์ที่จำเป็นสำหรับค่ารูปร่าง CSS ถึงแม้ว่าพวกเขาจะเป็นอย่างนั้น แต่การทำงานแบบนั้นก็คงไม่ได้ผลจริงๆ
รูปร่าง CSS มีไว้เพื่อใช้ในเบราว์เซอร์ ซึ่งจะโต้ตอบกับองค์ประกอบอื่นๆ ในหน้า การแสดงภาพผลกระทบของการแก้ไขรูปร่างในเนื้อหารอบตัวนั้นมีประโยชน์มาก โดยมีเครื่องมือ 2-3 อย่างที่จะช่วยคุณในเวิร์กโฟลว์นี้
Brackets : ส่วนขยายเครื่องมือแก้ไขรูปร่าง CSS สำหรับ Brackets จะใช้โหมดแสดงตัวอย่างแบบสดของตัวแก้ไขโค้ดเพื่อวางซ้อนเครื่องมือแก้ไขแบบอินเทอร์แอกทีฟสำหรับการแก้ไขค่าของรูปร่าง
Google Chrome : ส่วนขยายเครื่องมือแก้ไขรูปร่าง CSS สำหรับ Google Chrome ขยายเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ด้วยการควบคุมเพื่อสร้างและแก้ไขรูปร่าง ซึ่งจะวางตัวแก้ไขแบบอินเทอร์แอกทีฟไว้ที่ด้านบนขององค์ประกอบที่เลือก
เครื่องมือตรวจสอบใน Google Chrome มีการสนับสนุนในตัวสำหรับการไฮไลต์รูปร่าง วางเมาส์เหนือองค์ประกอบที่มีพร็อพเพอร์ตี้ shape-outside
แล้วองค์ประกอบจะสว่างขึ้นเพื่อแสดงรูปร่าง
รูปทรงจากรูปภาพ : หากคุณต้องการสร้างรูปภาพและให้เบราว์เซอร์แยกรูปร่างจากรูปร่างเหล่านั้น Rebecca Hauck ได้เขียนบทแนะนำสำหรับ Photoshop ไว้เป็นอย่างดี
Polyfill : Google Chrome เป็นเบราว์เซอร์หลักแรกที่ให้บริการรูปร่าง CSS ฟีเจอร์นี้จะมีการรองรับใน iOS 8 และ Safari 8 ของ Apple ในเร็วๆ นี้ ผู้ให้บริการเบราว์เซอร์รายอื่นๆ อาจพิจารณาใช้ในอนาคต ในระหว่างนี้ เรามี polyfill รูปร่าง CSS ที่ให้การสนับสนุนเบื้องต้นอยู่
บทสรุป
ในเว็บที่เนื้อหาส่วนใหญ่ติดอยู่ในกล่องธรรมดาๆ รูปร่าง CSS เป็นช่องทางในการสร้างเลย์เอาต์ที่ชัดเจน ช่วยประสานช่องว่างระหว่างการออกแบบเว็บและการออกแบบสิ่งพิมพ์ให้สอดคล้องกัน แน่นอนว่าอาจมีการละเมิดรูปร่างต่างๆ และสร้างสิ่งเบี่ยงเบนความสนใจได้ แต่เมื่อใช้รสนิยมและการตัดสินใจที่ดีแล้ว รูปทรงจะสามารถยกระดับการนำเสนอเนื้อหาและเน้นความสนใจของผู้ใช้ในแบบที่ไม่เหมือนใคร
เราขอฝากคอลเล็กชันผลงาน ของคนอื่นๆ ที่โดยส่วนใหญ่มาจากสิ่งพิมพ์ ซึ่งแสดงให้เห็นถึงการใช้งานที่น่าสนใจสำหรับเลย์เอาต์ที่ไม่ใช่รูปสี่เหลี่ยม เราหวังว่าข้อมูลนี้จะสร้างแรงบันดาลใจให้คุณลองใช้รูปร่าง CSS และทดลองไอเดียการออกแบบใหม่ๆ
ขอขอบคุณ Pearl Chen, Alan Stearns และ Zoltan Horvath มากที่อ่านบทความนี้และให้ข้อมูลเชิงลึกที่มีคุณค่า