代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ /* 固定部分 */ width: 0; height: 0; font-size: 0; line-height: 0; /* 可变化部分 */ /* 先全部边框设为透明 粗细可调 solid不变 */ border: 50px solid transparent; /* 显示左边三角形 */ /* border-left-color: brown; */ /* 显示上边三角形 */ /* border-top-color: black; */ /* 右边 */ /* border-right-color: blueviolet; */ /* 下边 */ border-bottom-color: chocolate; } </style> </head> <body> <div></div> </body> </html>
效果图:
CSS3-案例-用CSS画三角形技巧(面试题)
最新推荐文章于 2024-10-15 20:19:31 发布