使用CSS實現三角形
阿新 • • 發佈：2021-01-16
技術標籤：css
使用CSS實現三角形
一個盒子共包括margin+padding+conten+border
如果給盒子設定寬度、高度和邊框就會出現下圖
<style> .rect { width: 100px; height: 100px; border-color: red palegreen rebeccapurple cadetblue; border-style: solid; border-width: 20px; } </style> </head> <body> <div class='rect'></div> </body>
當我們把寬度和高度設定為0就會出現下圖
<style> .rect { width: 0px; height: 0px; border-color: red palegreen rebeccapurple cadetblue; border-style: solid; border-width: 20px; } </style> </head> <body> <div class='rect'></div> </body>
然後保留一種顏色，把其他的顏色設定為和背景一樣的顏色就ok了
<style> .rect { width: 0px; height: 0px; border-color: white white rebeccapurple white; border-style: solid; border-width: 20px; } </style> </head> <body> <div class='rect'></div> </body>
