วิธีสร้างเอฟเฟกต์ที่น่าทึ่งด้วยรูปร่าง CSS

Feb 2, 2026
วิธีการ
A Clipping Demo title

นักพัฒนาส่วนหน้ามีแนวโน้มที่จะคิดในรูปสี่เหลี่ยมผืนผ้า; รูปสี่เหลี่ยมผืนผ้าภายในสี่เหลี่ยมภายในสี่เหลี่ยมภายในสี่เหลี่ยม เราอาจใช้เทคนิคที่มีพรมแดนเพื่อสร้างแวดวงหรือสามเหลี่ยม แต่จริงๆแล้วพวกเขายังคงเป็นกล่องสี่เหลี่ยมในการปลอมตัว นี่คือการเปลี่ยนแปลงด้วย css รูปร่าง, w3c คำแนะนำของผู้สมัครที่จะเปลี่ยนวิธีที่คุณคิด

รูปร่าง CSS ช่วยให้คุณสร้างรูปทรงเรขาคณิตโดยใช้ฟังก์ชั่นรูปร่าง: วงกลม (), จุดไข่ปลา (), intet () และรูปหลายเหลี่ยม () และนำไปใช้กับองค์ประกอบหรือเอฟเฟกต์เช่นการตัดและตัวกรอง ยิ่งไปกว่านั้นรูปร่างสามารถส่งผลกระทบต่อการไหลของเนื้อหาช่วยให้คุณสามารถห่อข้อความอย่างเรียบร้อยรอบ ๆ คุณสมบัติเช่นอวตารแบบวงกลม

บางทีฟังก์ชั่นรูปร่างที่ทรงพลังที่สุดคือรูปหลายเหลี่ยม () เพราะช่วยให้คุณสร้างรูปร่างที่ซับซ้อนโดยใช้จุดที่ไม่ จำกัด โดยใช้คู่ประสานงาน หากคุณใช้ svg สิ่งนี้จะเป็นที่คุ้นเคยกับคุณ

ในบทช่วยสอนนี้เราจะใช้รูปหลายเหลี่ยมที่มีคุณสมบัติคลิปพา ธ เพื่อตัดรูปทรงเรขาคณิตออกจากข้อความของเราเพื่อให้เห็นเฉพาะพื้นที่ที่อยู่ภายในรูปหลายเหลี่ยมมองเห็นได้ นอกจากนี้เรายังจะเพิ่มการเปลี่ยนแปลงอย่างง่าย ๆ เพื่อนำเอฟเฟกต์มาสู่ชีวิต คุณสามารถคว้ารหัสสำหรับแต่ละขั้นตอนในการซื้อคืนนี้จาก GitHub ที่นี่ .

01. เริ่มต้นด้วย HTML

ก่อนอื่นให้รับ HTML ของเราพร้อม เราแค่ต้องการ & lt; div & gt; ของเรา .คลิป ชั้นเรียนและข้อความของเรา แต่เนื่องจากเราจะใช้องค์ประกอบหลอกสำหรับเอฟเฟกต์นี้เราจะเพิ่มแอตทริบิวต์ด้วยค่าเดียวกันกับข้อความเพื่อให้เราสามารถอ่านลงใน CSS มากกว่าการเข้ารหัสได้ยาก 

 & lt; div class = "clip" data-content = "การสาธิตการตัด" & gt;
การสาธิตการตัด
& lt; / div & gt;

ต่อไปเราต้องการที่จะทำให้มันเติมหน้าจอและจัดตำแหน่ง Text Dead Center - เราสามารถใช้บางอย่าง flexbox เวทมนตร์สำหรับสิ่งนี้ ลองสไตล์และขนาดข้อความกันเถอะ 

. คลิป {
// เติมหน้าจอ
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ซ้าย: 0;
ความกว้าง: 100%;
ความสูง: 100%;
// การจัดตำแหน่ง
จอแสดงผล: Flex; // ใช้ Flex สำหรับการจัดตำแหน่ง
แสดงให้เห็นถึงเนื้อหา: ศูนย์; // การจัดตำแหน่งแนวนอน
จัดเรียงรายการ: ศูนย์; // การจัดตำแหน่งแนวตั้ง
// จัดแต่งทรงผมข้อความ
ตัวอักษรตระกูล: 'ทำงาน Sans', Arial, Helvetica, Sans-Serif; // Sans ทำงานได้จาก Google Fonts
ฟอนต์ - น้ำหนัก: 800;
ขนาดตัวอักษร: 8Rem;
จัดเรียงข้อความ: กึ่งกลาง;
ข้อความการแปลง: ตัวพิมพ์ใหญ่;
}

02. เพิ่มสไตล์บางอย่าง

ตอนนี้เราสามารถจัดสไตล์ ::ก่อน และ ::หลังจาก องค์ประกอบหลอกโดยแต่ละครั้งที่กลายเป็นเลเยอร์ที่ด้านบนของข้อความ โดยค่าเริ่มต้น, ::หลังจาก จะมี z ดัชนีสูงสุด มีประโยชน์ attr () ตัวเลือกจะอ่านคุณค่าของเรา เนื้อหาข้อมูล คุณลักษณะ

องค์ประกอบหลอกจะแบ่งปันตำแหน่งและคุณสมบัติ Flexbox ดังนั้นเราจึงสามารถ refactor CSS ของเราเล็กน้อยและใช้ประโยชน์จากพลังของ SCSS เพื่อให้สไตล์ชีทของเราเป็นระเบียบเรียบร้อย การจัดแต่งทรงผมแบบอักษรจะได้รับการสืบทอด เรากำลังใช้ ... เพื่อแสดงถึงคุณสมบัติที่เราได้รับความคุ้มครองแล้ว 

. คลิป {
...
// ตำแหน่งตัวเอง (& amp;) และองค์ประกอบหลอก (ก่อน / หลัง)
& amp;
& amp; :: มาก่อน
& amp; :: หลังจาก {
  ตำแหน่ง: แน่นอน;
  ด้านบน: 0;
  ซ้าย: 0;
  ความกว้าง: 100%;
  ความสูง: 100%;
  จอแสดงผล: Flex; // ใช้ Flex สำหรับการจัดตำแหน่ง
  แสดงให้เห็นถึงเนื้อหา: ศูนย์; // การจัดตำแหน่งแนวนอน
  จัดเรียงรายการ: ศูนย์; // การจัดตำแหน่งแนวตั้ง
}
& amp; :: มาก่อน
& amp; :: หลังจาก {
  เนื้อหา: Attr (เนื้อหาข้อมูล); // ใช้ค่าแอตทริบิวต์เป็นเนื้อหา
}
}

ผลลัพธ์ในเบราว์เซอร์ควรมีลักษณะเหมือนกันเพราะองค์ประกอบหลอกกำลังนั่งอยู่ด้านบนของข้อความ คุณสามารถปรับเปลี่ยนสไตล์ของพวกเขาได้ devtools เพื่อดูว่าพวกเขามีเลเยอร์อย่างไร

03. ตั้งพื้นหลังและสี

เวลาที่จะให้แต่ละชั้นสีและพื้นหลังที่แตกต่างกัน - มาหาตัวหนาสีนีออนที่เรากำหนดไว้ล่วงหน้าเป็นตัวแปร นอกจากนี้เรายังสามารถบังคับให้ข้อความห่อไปยังหลายบรรทัดโดยใช้ CSS Padding Trick แทนที่จะเพิ่มเหล่านี้ใน HTML

สิ่งนี้มีประโยชน์เช่นเดียวกับมิฉะนั้นเราจะต้องใช้การแบ่งบรรทัดที่แตกต่างกันสองประเภท: & lt; BR & GT; ข้างใน & lt; div & gt; และความคลุมเครือมากขึ้น \ a ในแอตทริบิวต์ 

. คลิป {
...
& amp;
& amp; :: มาก่อน
& amp; :: หลังจาก {
  padding: 0 50%;
  การปรับขนาดกล่อง: กล่องแดน;
}
& amp; :: ก่อน {
  สี: $ ขาว;
  พื้นหลัง: $ pink;
}
& amp; :: หลังจาก {
  สี: $ pink;
  พื้นหลัง: $ blue;
}
}

เคล็ดลับ padding ทำงานโดยให้ความกว้างในแนวนอนเป็นศูนย์บังคับให้เบราว์เซอร์ห่อแต่ละคำให้กับบรรทัดใหม่

04. คลิปข้อความ

เวลาสำหรับบิตที่น่าสนใจ - เราพร้อมที่จะเริ่มตัดข้อความของเรา เราจะสร้างคลิปทแยงมุมหั่นหน้าจอเป็นสองสามเหลี่ยมจากด้านล่างซ้ายไปขวา

ที่ ::ก่อน องค์ประกอบหลอกจะสามารถมองเห็นได้เฉพาะในสามเหลี่ยมซ้ายบนและ ::หลังจาก องค์ประกอบหลอกจะสามารถมองเห็นได้เฉพาะในสามเหลี่ยมด้านล่างขวาเท่านั้น นี่คือรหัสเพื่อให้บรรลุว่า: 

. คลิป {
...
& amp; :: ก่อน {
  Clip-Path: รูปหลายเหลี่ยม (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: หลังจาก {
  Clip-Path: รูปหลายเหลี่ยม (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

สิ่งนี้สร้างรูปหลายเหลี่ยมที่มีสี่คะแนน แต่ละจุดอธิบายโดยคู่ประสานงาน เพียง x (ซ้ายไปขวา) และค่า y (บนลงล่าง) ค่าสามารถสัมบูรณ์ (ตัวอย่างเช่น: PX) หรือญาติ (ตัวอย่าง:%) คะแนนอ้างอิงถึงด้านบนซ้ายดังนั้นคะแนนที่ 100% 100% อยู่ที่ด้านล่างขวา

ลองนึกภาพบรรทัดที่เชื่อมต่อแต่ละจุดตามลำดับที่ระบุว่ามีการจัดรูปแบบรูปร่าง ใน ::ก่อน รูปหลายเหลี่ยมมันเริ่มต้นที่ด้านบนซ้าย (0 0) ย้ายไปที่หน้าจอที่ด้านบนขวา (100% 0) จากนั้นลงไปที่ด้านล่างซ้าย (0 100%) .

หวังว่าคุณจะได้เห็นข้อความที่ตัดเย็บของคุณตอนนี้ ปรับขนาดเบราว์เซอร์และคุณจะเห็นการตัดการตัดต่อตามลำดับ

หากคุณใช้ Chrome คุณอาจเห็นปัญหาการทาสีบางอย่างในขณะที่ปรับขนาดซึ่งเกิดจากชั้นคอมโพสิตของ Chrome น่าเสียดายเพราะการสาธิตเป็นแบบเต็มหน้าจอแนะนำ จะเปลี่ยน: แปลง ทรัพย์สินและ แปลง: Translatez (0) แฮ็คไม่แก้ไขสิ่งนี้ อย่างไรก็ตามถ้าคุณเปลี่ยน .คลิป ถึง ตำแหน่ง: แก้ไข; มันได้ผล. 

 คลิป {
& amp;
& amp; :: มาก่อน
& amp; :: หลังจาก {
  ตำแหน่ง: แก้ไข;
}
}

จำไว้ว่า Chrome กำลังพยายามเป็นประโยชน์และวิธีแก้ปัญหานี้จะมีผลกระทบต่อประสิทธิภาพการทำงาน ให้แน่ใจว่าประสิทธิภาพโปรไฟล์เมื่อทำสิ่งนี้ในการผลิต

05. เพิ่มการเปลี่ยน

ตอนนี้เราได้รับข้อความที่ตัดแล้วให้นำมันไปสู่ชีวิตด้วยการเปลี่ยนผ่าน ข่าวดีก็คือคุณสามารถเปลี่ยนได้ เส้นทาง คุณสมบัติเพื่อให้เบราว์เซอร์ทำงานหนักทั้งหมด ลองเปิดใช้งานการเปลี่ยนภาพบนองค์ประกอบหลอกและจากนั้นกำหนดสี่รัฐที่แตกต่างกันเพื่อเปลี่ยนระหว่าง

รัฐที่ 1: นี่คือสถานะเริ่มต้นดังนั้นเรามาสร้างอีกสามคน

เพิ่มบล็อกแต่ละอันที่ด้านล่างของ CSS ของคุณตามที่คุณไปดังนั้นคุณสามารถดูว่ามันเป็นอย่างไร

รัฐที่ 2: ย้ายสามเหลี่ยมออกจากกันเล็กน้อยเพื่อเผยพื้นหลัง

สิ่งนี้จะมีลักษณะเหมือนธงของสาธารณรัฐคองโก การลบ 20 เปอร์เซ็นต์จากปลายสามเหลี่ยมรูปหลายเหลี่ยมแต่ละอันจะทำเคล็ดลับ

รัฐที่ 3: morph สามเหลี่ยมเป็นรูปสี่เหลี่ยมผืนผ้า

นี่คล้ายกับไตรรงค์ของฝรั่งเศสในการย้อนกลับ

สิ่งที่เกี่ยวกับคู่ที่สี่ประสานงานนั้น? นี่คือที่ที่มีประโยชน์ ปรากฎว่าการเปลี่ยนผ่าน เส้นทาง ใช้งานได้เฉพาะเมื่อฟังก์ชั่นรูปร่างที่ใช้เหมือนกัน (ดังนั้น polygon & gt; polygon) และจำนวนคะแนนที่ใช้เหมือนกัน - เบราว์เซอร์จะเปลี่ยนแต่ละจุดแต่ละจุด นั่นเป็นเหตุผลที่เรามีจุดซ่อนที่สี่ - ช่วยให้เราสามารถเปลี่ยนจากรูปสามเหลี่ยมเป็นรูปสี่เหลี่ยมผืนผ้าได้อย่างราบรื่นเราเพิ่งเปิดเผยจุดที่สี่เมื่อเราต้องการมัน 

. คลิป {
& amp; :: ก่อน {
  Clip-Path: รูปหลายเหลี่ยม (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: หลังจาก {
  Clip-Path: รูปหลายเหลี่ยม (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

รัฐ 4: บิดรูปหลายเหลี่ยมเหล่านั้น

การเกาะติดกับธีมธงของเรานี้จะมีลักษณะคล้ายกับ 'ฉันต้องการการลากจูงในโลกของการส่งสัญญาณธงทางทะเล

ที่นี่เรากำลังบิดรูปหลายเหลี่ยมเพื่อให้พวกเขาข้ามอยู่ตรงกลางและสร้างสามเหลี่ยมสองรูปแต่ละอัน นี่คือเมื่อการเปลี่ยนผ่านสามารถช่วยให้คุณเข้าใจคู่ประสานงาน โดยการชะลอการเปลี่ยนแปลงจริง ๆ คุณสามารถดูว่าแต่ละจุดเคลื่อนที่ผ่านหน้าจอไปยังตำแหน่งใหม่และคุณเริ่มเข้าใจว่าการสั่งซื้อของคู่มีผลต่อการเปลี่ยนแปลงอย่างไร จริง ๆ แล้วมันจะช่วยให้คุณสามารถควบคุมการเปลี่ยนแปลงได้มาก 

. คลิป {
& amp; :: ก่อน {
  Clip-Path: รูปหลายเหลี่ยม (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: หลังจาก {
  Clip-Path: รูปหลายเหลี่ยม (100% 0, 100% 100%, 0 0, 0 100%);
}
}

สรุป

เราทุกคนตั้งอยู่ แต่เรายังไม่สามารถเปลี่ยนสถานะได้ซึ่งหมายความว่าคุณไม่สามารถมองเห็นการเปลี่ยนแปลงในการดำเนินการ มีหลายวิธีในการบรรลุเป้าหมายนี้ดังนั้นจึงขึ้นอยู่กับคุณ ในการ repo และ codepen ฉันใช้โซลูชั่นฟรี JavaScript 100 เปอร์เซ็นต์พร้อมปุ่มวิทยุที่ซ่อนอยู่และตัวเลือก Sibling ~ General - ลองดู คุณสามารถตรวจสอบ codepen ของบทช่วยสอนนี้ได้ ที่นี่ .

บทความนี้ปรากฏในฉบับที่ 298 ของ สุทธิ นิตยสารสำหรับนักออกแบบเว็บไซต์มืออาชีพและนักพัฒนา - นำเสนอแนวโน้มเทคโนโลยีและเทคนิคใหม่ล่าสุด ซื้อปัญหา 298 ที่นี่ หรือ สมัครสมาชิก NET ที่นี่ .

ข้อเสนอคริสต์มาสพิเศษ: ประหยัดสูงสุดถึง 47% สำหรับการสมัครรับข้อมูลไปยัง NET สำหรับคุณหรือเพื่อนสำหรับคริสต์มาส มันเป็นข้อเสนอที่ จำกัด ดังนั้นย้ายอย่างรวดเร็ว ...

บทความที่เกี่ยวข้อง:

  • 28 ตัวอย่างที่โดดเด่นของ CSS
  • วิธีการสร้างเค้าโครงปิรามิดด้วยรูปร่าง CSS
  • เทคนิค CSS เพื่อปฏิวัติรูปแบบเว็บของคุณ

วิธีการ - บทความยอดนิยม

แผ่นตัวละครสำหรับ 3D Modellers: 15 เคล็ดลับยอดนิยม

วิธีการ Feb 2, 2026

(เครดิตภาพ: Dahlia Khodur) แผ่นอักขระเป็นคำสั่งของว..

ทีละขั้นตอน: วิธีการเลียนแบบสีน้ำมันใน Corel Painter

วิธีการ Feb 2, 2026

มันรู้สึกเหมือนเมื่อวานนี้เมื่อฉันเล่นตามบทบาทกับเพื่อนในโรงเรี�..

นักออกแบบ Affinity: วิธีการใช้งานส่งออก

วิธีการ Feb 2, 2026

Affinity Designer เป็นเครื่องมือแก้ไขเวกเตอร์ยอดนิยม เช�..

ทาสีลงบนตาข่าย 3 มิติที่มีเครื่องมือโพลีไลท์ของ zbrushcore

วิธีการ Feb 2, 2026

โหยหา zbrushcore เป็นเครื่องมือที่ยอดเยี่ยมที่..

ทาสีซีสเคปที่กระฉับกระเฉงในน้ำมัน

วิธีการ Feb 2, 2026

วัสดุ Sarah ว�..

สร้างความรู้สึกทาสีในศิลปะดิจิทัลของคุณ

วิธีการ Feb 2, 2026

ภาพวาดดิจิตอลได้รับความเดือดร้อนในอดีตจากกา..

10 กฎทองสำหรับ SVG ตอบสนอง

วิธีการ Feb 2, 2026

ข้อดีหลายประการของ SVG - รวมถึงภาพเวกเตอร์ที่ปร�..

วิธีการออกแบบฮีโร่เคลื่อนไหว

วิธีการ Feb 2, 2026

เคล็ดลับต่อไปนี้สลายกระบวนการของฉันสำหรับการเคลื่อนไหวแบบอนิเมช�..

หมวดหมู่