วิธีการสร้างขอบเบ้ด้วย CSS

ในบทความนี้เราจะมาดูว่าเราสามารถสร้างเอฟเฟกต์ขอบมุม (แนวนอน) บนหน้าเว็บได้อย่างไร โดยพื้นฐานแล้วจะมีลักษณะดังนี้:

การมีมุมที่เอียงเล็กน้อยควรทำให้เค้าโครงเว็บของเราดูแข็งแกร่งและน่าเบื่อน้อยลง ในการทำเคล็ดลับนี้เราจะใช้ หลอกองค์ประกอบ ::ก่อน และ ::หลังจาก และ การแปลง CSS3.

ใช้องค์ประกอบหลอก

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

 .บล็อก ความสูง: 400px; ความกว้าง: 100%; ตำแหน่ง: ญาติ; พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%);  .block :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: ล่างซ้าย; transform: skewY (3deg); 

ขอปะยางรถ.

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

เปลี่ยนรูป: skewY (3deg); ทำให้ ::หลังจาก ปิดกั้นการเอียงหรือมุมที่ 3 องศา เนื่องจากเราระบุพิกัดเริ่มต้นเป็นล่างซ้ายล่างขวาของบล็อกจะเพิ่มขึ้น 3 องศา ถ้าเราสลับ เปลี่ยนแหล่งกำเนิด ไปยัง ด้านล่างขวา และมุมซ้ายล่างจะเพิ่มขึ้น 3 องศาแทน.

คุณสามารถเพิ่มพื้นหลังสีทึบหรือไล่ระดับสีเพื่อดูผลลัพธ์.

ทำให้ง่ายขึ้นด้วย Sass Mixin

เพื่อให้ง่ายขึ้นฉันได้สร้างมิกซ์ Sass เพื่อเพิ่มขอบมุมลบกับอาการปวดหัวจากการจัดการกับความซับซ้อนของกฎสไตล์ ด้วย mixin ต่อไปนี้คุณสามารถระบุด้านได้อย่างรวดเร็ว - ด้านบนซ้าย, ขวาบน, ซ้ายล่างหรือขวาล่าง - เพื่อเอียง.

 @mixin-edge-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; ตำแหน่ง: ญาติ; พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; การเปลี่ยน: ทำให้ง่ายขึ้น. 5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: right top; transform: skewY ($ angle-top); @ ถ้า $ pos-top = = 'topright' top: 0; transform-origin: left top; transform: skewY (- $ angle-top); @if $ pos-btm & :: หลัง @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: ล่างขวา; transform: skewY (- $ angle-btm); @ ถ้า $ pos-btm == 'bottomright' bottom: 0; transform-origin: ด้านล่างซ้าย; เปลี่ยนรูป: skewY ($ angle-btm); 

มีสี่ตัวแปรในมิกซ์อิน ตัวแปรสองตัวแรก, $ POS บน และ $ มุมด้านบน, ระบุ พิกัดเริ่มต้นด้านบน และ ระดับ. ตัวแปรสองตัวหลังระบุ ประสานงาน และ ระดับ สำหรับ ด้านล่าง ด้าน.

หากคุณเติมทั้งสี่ตัวแปรคุณสามารถทำมุมทั้งสองด้าน - ด้านบนและด้านล่าง - ขององค์ประกอบ.

ใช้ Sass @include ไวยากรณ์เพื่อแทรกมิกซ์เข้าไปในองค์ประกอบ คุณสามารถดูตัวอย่างด้านล่าง:

หากต้องการเพิ่มขอบเอียงบน บนซ้าย ด้าน:

 .บล็อก @ รวมถึงมุมขอบ (ด้านบน, 3deg);  

หากต้องการเพิ่มขอบเอียงบน ด้านล่างขวา ด้าน:

 .บล็อก @ รวมถึงขอบมุม (ด้านล่างขวา, 3deg);  

หากต้องการเพิ่มขอบเอียงบน บนซ้าย และ ด้านล่างขวา ด้าน:

 .บล็อก @ รวมถึงมุมขอบ (ด้านบน, 3deg, ด้านล่าง, 3deg);  

ด้านล่างนี้เป็นการสาธิตโดยใช้มิกซ์อิน เปลี่ยนกล่องเลือกเพื่อสลับเป็นสไตล์อื่น.

แค่นั้นแหละ!