border实现图形(边框的形状)和旋转
- border主要是用于盒子的边框,但是有时我们也可以用它来设置一些形状
-
假如我们将border宽度设置成50会是什么效果呢?
-
如果我把其他三边颜色去掉会怎么样呢?
-
如果我们将这个盒子旋转呢?
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100px; height: 100px; /* background-color: #f00; */ box-sizing: border-box; border: 50px solid orange; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; transform: rotate(90deg); } </style> </head> <body> <div class="box"></div> </body> </html>
-
如果设计没有给这个形状,也可以利用这个border实现这些形状
-
这个三角形很多网站都有,例如:小米官网