วิธีสร้าง CSS Ribbon

เรายังตั้งค่า มิติพื้นฐาน และ สีพื้นหลัง ด้วย CSS.

 .บัตร สีพื้นหลัง: สีเบจ; ความสูง: 300px; มาร์จิ้น: 40px; ความกว้าง: 500px;  

ส่วนตรงกลางของริบบิ้น

เราจะใช้ ตัวแปร CSS (ช่วยให้เราสามารถจัดเก็บและนำค่า CSS มาใช้ใหม่) ที่เรียกว่า --พี ไปยัง เก็บค่าช่องว่างภายใน. ค่าของ การขยายความ คุณสมบัติใช้ var (p -) ไวยากรณ์สำหรับการขยายด้านซ้ายและขวาของ ribbon เพื่อให้สามารถ กว้างขึ้นได้อย่างง่ายดาย. --พี ตัวแปรในภายหลังจะเป็น นำมาใช้ซ้ำหลายครั้ง; นั่นทำให้รหัสของเรายืดหยุ่น.

 .ริบบิ้น --p: 15px; สีพื้นหลัง: rgb (170,170,170); ความสูง: 60px; การขยาย: 0 var (- p); ความกว้าง: 100%;  

ในภาพหน้าจอด้านล่างคุณสามารถดูว่าการสาธิตของคุณควรมีลักษณะเป็นอย่างไร ณ จุดนี้:

อยู่ตรงกลางของริบบิ้น

เรายังต้อง จัดกึ่งกลางริบบิ้น. เรา ผลักไปทางซ้ายตามขนาดของช่องว่างภายใน (ทำเครื่องหมายโดย --พี ตัวแปร) โดยใช้การวางตำแหน่งสัมพัทธ์.

 .ริบบิ้น --p: 15px; สีพื้นหลัง: rgb (170,170,170); ความสูง: 60px; การขยาย: 0 var (- p); ตำแหน่ง: ญาติ; ขวา: var (- p); ความกว้าง: 100%;  

การสาธิตที่อัปเดต:

ด้านข้างของริบบิ้น

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

องค์ประกอบหลอกทั้งสองสืบทอดสีพื้นหลังของ .ริบบิ้น, และเราใช้ ตัวกรอง: ความสว่าง (.5) กฎเพื่อทำให้เข้มสีของพวกเขาเล็กน้อย พวกเขายัง ตำแหน่งอย่างแน่นอน ภายในผู้ปกครอง (อยู่ในตำแหน่งที่ค่อนข้าง).

ความกว้างของพวกเขาต้องเป็น เช่นเดียวกับขนาดของช่องว่างภายใน, และเราวางพวกเขา ไปทางซ้ายและขวาของริบบิ้น ใช้ ซ้าย: 0 และ ขวา: 0 กฎสไตล์.

 .ribbon: ก่อน, .ribbon: หลัง background-color: inherit; เนื้อหา: "; display: block; ตัวกรอง: ความสว่าง (.5); ความสูง: 100%; ตำแหน่ง: สัมบูรณ์, ความกว้าง: var (- p); .ribbon: ก่อน left: 0; .ribbon: หลัง  ขวา: 0; 

ตอนนี้ริบบิ้นที่มีด้านข้างที่เราเพิ่งเพิ่มเข้าไปมีลักษณะดังนี้:

เอียงด้านข้าง

เพื่อให้ด้านข้างของริบบิ้น ดูงอ, เราจำเป็นต้อง เอียงด้านข้าง 45 °. เปลี่ยนรูป: skewy () กฎ CSS เอียงองค์ประกอบในแนวตั้ง.

 .ribbon: ก่อนหน้า ซ้าย: 0; เปลี่ยน: skewy (45deg);  .ribbon: หลังจาก right: 0; เปลี่ยน: skewy (-45deg);  

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

จัดแนวด้านข้าง

ไปยัง กำหนดความยาวที่เหมาะสม เมื่อเราต้องการเลื่อนด้านข้างลงเราจะเปลี่ยนเป็นตรีโกณมิติ. สิ่งที่เราต้องค้นหาคือ x, เช่น Y คือความกว้างของด้านข้าง (เท่ากับขนาดของช่องว่างภายใน .ริบบิ้น) และมุม θ คือ 45 ° (มุมเอียง).

ผลลัพท์ที่ได้ x แล้วก็ จะต้องลดลงครึ่งหนึ่ง, เนื่องจากมีด้านซ้ายและด้านขวาเช่นกัน.

หากคุณใช้ CSS พรีโปรเซสเซอร์ก่อนหน้าตรวจสอบว่ามี สีน้ำตาล ฟังก์ชั่นมิฉะนั้นอ้างถึงแผนภูมิสัมผัสหรือเครื่องคิดเลข หาค่าแทนเจนต์ของมุม. เราโชคดี ผิวสีแทน 45 ° คือ 1, ซึ่งหมายความว่าค่าของ x เท่ากับ Y ในกรณีของเรา.

 .ribbon: ก่อน, .ribbon: หลัง background-color: inherit; เนื้อหา: "; แสดง: บล็อก; ตัวกรอง: ความสว่าง (.5); ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; ด้านบน: Calc (var (- p) / 2); ความกว้าง: var (- p); 

ตั้งแต่ x จะต้องลดลงครึ่งหนึ่งเราใช้ Calc () ฟังก์ชัน CSS เพื่อทำการหารของ --พี ตัวแปร.

ในที่สุดเราก็ต้อง จัดเรียงด้านข้างตามแนวแกน z เช่นกันดังนั้นมาเพิ่ม ดัชนี z: -1 กฎด้านข้างเพื่อ วางไว้ด้านหลังส่วนกลางของริบบิ้น.

 .ribbon: ก่อน, .ribbon: หลัง background-color: inherit; เนื้อหา: "; แสดง: บล็อกตัวกรอง: ความสว่าง (.5); ความสูง: 100% ตำแหน่ง: สัมบูรณ์; ด้านบน: Calc (var (- p) / 2); ความกว้าง: var (- p); z- ดัชนี: -1; 

ตอนนี้เราจัดแนวด้านข้างริบบิ้น CSS ของเราเสร็จแล้ว.

ด้านล่างคุณสามารถตรวจสอบการสาธิตสดอีกครั้งโปรดทราบว่ามันใช้สไตล์เพิ่มเติมบางอย่างเช่นกัน.