วิธีการสร้างรูปหัวใจด้วย CSS

จากนั้นเราสร้างมันเป็นสี่เหลี่ยมจัตุรัสโดยระบุความกว้างและความสูงเท่ากัน เลือกสีพื้นหลังที่คุณชอบ.

 .รูปหัวใจ ตำแหน่ง: ญาติ; ความกว้าง: 200px; ความสูง: 200px; สีพื้นหลัง: rgba (250,184,66, 0.8);  

ต่อไปเราจะสร้างวงกลม.

แทนที่จะเพิ่มองค์ประกอบใหม่เราจะใช้ประโยชน์จากองค์ประกอบหลอก, :ก่อน และ :หลังจาก. ก่อนอื่นเราตั้งค่า :ก่อน องค์ประกอบเทียมเป็นวงกลมแรกของเรา เราทำให้มันเป็นสี่เหลี่ยมจัตุรัสที่มีขนาดเท่ากันกับความกว้างและความสูงเหมือนกับที่เราทำกับ div จากนั้นเราเปลี่ยนมันเป็นวงกลมโดยให้รัศมีรัศมี 50% แล้ววางไว้ที่ด้านซ้ายของตาราง.

 .รูปหัวใจ: ก่อน ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0px; ซ้าย: -100px; ความกว้าง: 200px; ความสูง: 200px; เนื้อหา: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; รัศมีชายแดน: 50%; background-color: rgba (250,184,66 , 0.8); 

เราจะได้ผลลัพธ์ดังนี้:

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

 .รูปหัวใจ: หลัง ตำแหน่ง: สัมบูรณ์; ด้านบน: -100px; ขวา: 0px; ความกว้าง: 200px; ความสูง: 200px; เนื้อหา: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; รัศมีชายแดน: 50%; background-color: rgba (250,184,66 , 0.8); 

ผลลัพธ์มีดังนี้:

เราสามารถรวมสไตล์ที่เหมือนกันทั้งสองนี้ได้ด้วยการจัดกลุ่มตัวเลือกองค์ประกอบเทียมดังนี้:

 .รูปหัวใจ: ก่อน, .heart-shape: หลัง ตำแหน่ง: สัมบูรณ์; ความกว้าง: 200px; ความสูง: 200px; เนื้อหา: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; รัศมีชายแดน: 50%; background-color: rgba (250,184,66 , 0.8); .heart-shape: ก่อนที่จะ bottom: 0px; left: -100px; .heart-shape: หลัง top: -100px; right: 0px; 

Ta-da! เรามีรูปหัวใจแม้ว่าจะยังไม่ได้ไปในทิศทางที่ถูกต้อง ในการทำให้ตรงขึ้นเราจะใช้การแปลง CSS3.

การเปลี่ยนแปลงสามารถให้กับองค์ประกอบหลักของรูปร่าง นี่หมายถึงสี่เหลี่ยมจัตุรัส เมื่อทำการแปลงองค์ประกอบหลอกจะเปลี่ยนตำแหน่งโดยอัตโนมัติตามองค์ประกอบหลัก.

ที่นี่เราจะหมุนหัวใจเพื่อให้เห็น “จุดยืน”.

 .รูปหัวใจ -webkit-transform: หมุน (45deg); -moz-transform: หมุน (45deg); -ms-transform: หมุน (45deg); -o-transform: หมุน (45deg); แปลง: หมุน (45deg);  

และนี่คือสิ่งที่หัวใจของเราดูเหมือนตอนนี้.

ผลลัพธ์:

รหัสที่สมบูรณ์ของรูปหัวใจด้านบนมีดังต่อไปนี้ใน HTML:

และใน CSS ของเรามันจะเป็นเช่นนี้:

 .รูปหัวใจ ตำแหน่ง: ญาติ; ความกว้าง: 200px; ความสูง: 200px; -webkit-transform: หมุน (45deg); -moz-transform: หมุน (45deg); -ms-transform: หมุน (45deg); -o-transform: หมุน (45deg); แปลง: หมุน (45deg); สีพื้นหลัง: rgba (250,184,66, 1);  .heart-shape: before, .heart-shape: หลังจาก position: absolute; ความกว้าง: 200px; ความสูง: 200px; เนื้อหา: "; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; รัศมีชายแดน: 50%; background-color: rgba (250,184,66 , 1); .heart-shape: ก่อนหน้า bottom: 0px; left: -100px; .heart-shape: หลัง top: -100px; right: 0px; 

ขอให้สังเกตว่าตอนนี้เราตั้งช่องอัลฟาของ rgba (250,184,66, 1) ในพื้นหลังถึง 1 เพื่อลบความโปร่งใส นี่คือสิ่งที่ใจเรามอง.

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

ข้อสรุป

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

คุณถูก จำกัด ด้วยความคิดสร้างสรรค์และจินตนาการของคุณ!