原理剖析
做一個
width為0、
height為0，
border為40的元素
div
div
width: 0
height: 0
border: 40px solid #000
4個
border都給予不同顏色，發現邊框與邊框之間呈現45度角
div
width: 0
height: 0
border-top: 40px solid aliceblue
border-bottom: 40px solid cadetblue
border-left: 40px solid lightblue
border-right: 40px solid skyblue
移除
border-top，並將
border-bottom的寬度改成2倍大
div
width: 0
height: 0
border-bottom: 80px solid cadetblue
border-left: 40px solid lightblue
border-right: 40px solid skyblue
將
border-right、
border-left的顏色都設為
transparent
div
width: 0
height: 0
border-bottom: 80px solid cadetblue
border-left: 40px solid transparent
border-right: 40px solid transparent
快速複製區
div
width: 0
height: 0
border-bottom: 80px solid cadetblue
border-left: 40px solid transparent
border-right: 40px solid transparent
div
width: 0
height: 0
border-top: 80px solid cadetblue
border-left: 40px solid transparent
border-right: 40px solid transparent
div
width: 0
height: 0
border-left: 80px solid cadetblue
border-top: 40px solid transparent
border-bottom: 40px solid transparent
div
width: 0
height: 0
border-right: 80px solid cadetblue
border-top: 40px solid transparent
border-bottom: 40px solid transparent
