使用CSS除了可以給網頁添加各種顏色、背景、邊框等樣式,還可以用來制作各種形狀。下面就來介紹幾種實現方式。
/*1. 圓形*/ .example{ width: 100px; height: 100px; background: #ccc; border-radius: 50%; /*設置圓形半徑,50%表示寬高相等*/ } /*2. 三角形*/ .example{ width: 0; height: 0; border-top: 50px solid #ccc; border-right: 50px solid transparent; /*設置邊框顏色和樣式*/ } /*3. 梯形*/ .example{ width: 100px; height: 0; border-top: 50px solid #ccc; border-right: 25px solid transparent; border-left: 25px solid transparent; } /*4. 菱形*/ .example{ width: 0; height: 0; border: 50px solid #ccc; border-width: 0 25px 50px 25px; transform: rotate(45deg); /*通過旋轉實現菱形*/ } /*5. 右箭頭*/ .example{ width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 20px solid #ccc; } /*6. 左箭頭*/ .example{ width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 20px solid #ccc; } /*7. 上箭頭*/ .example{ width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 20px solid #ccc; } /*8. 下箭頭*/ .example{ width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 20px solid #ccc; }
以上是幾種常見的使用CSS制作其他形狀的方法,可以根據實際需要選擇適合自己的方式來實現。通過CSS的靈活運用,網頁可以呈現出更加形式多樣的效果。