使用CSS可以很簡單地做出正方形。以下是一些方法:
/* 方法一:使用padding實現(xiàn) */ .square1 { width: 0; height: 0; padding-bottom: 100%; /* 建立高度的占比 */ background-color: red; /* 給盒子添加顏色 */ } /* 方法二:使用position和transform實現(xiàn) */ .square2 { width: 100px; height: 100px; position: relative; background-color: blue; /* 給盒子添加顏色 */ } .square2::before { content: ''; /* 使用偽元素 */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; /* 繼承盒子的顏色 */ transform: rotate(45deg); /* 旋轉(zhuǎn)45度 */ } /* 方法三:使用flex和偽元素實現(xiàn) */ .square3 { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; background-color: green; /* 給盒子添加顏色 */ } .square3::before { content: ''; /* 使用偽元素 */ width: 70%; /* 設(shè)置寬度為盒子的百分之70 */ height: 70%; background-color: inherit; /* 繼承盒子的顏色 */ }
以上三種方法都可以通過修改CSS屬性來實現(xiàn)不同大小和顏色的正方形。這些方法只是介紹了其中簡單的幾種,你也可以通過其他方法實現(xiàn)自己的正方形。