css画线

zyw

1. .x {
   
2.     border: solid 1px red;
   
3.     width: 100px;
   
4.     height: 100px;
   
5.     position: relative;
   
6.     background-color: transparent;
   
7. }
   
8. 
   
9. .x:before {
   
10.     position: absolute;
    
11.     top: 0px;
    
12.     right: 0;
    
13.     left: 0;
    
14.     bottom: 0;
    
15.     border-bottom: 100px solid red;
    
16.     border-left: 100px solid transparent;
    
17.     content: "";
    
18. }
    
19. 
    
20. .x:after {
    
21.     position: absolute;
    
22.     left: 1px;
    
23.     right: 0;
    
24.     top: 1px;
    
25.     bottom: 0;
    
26.     border-bottom: 99px solid white;
    
27.     border-left: 99px solid transparent;
    
28.     content: "";
    
29. }
    
30. 
    
31. .f {
    
32.     border: solid 1px red;
    
33.     width: 100px;
    
34.     height: 100px;
    
35.     position: relative;
    
36.     background-color: transparent;
    
37. }
    
38. 
    
39. .f:before {
    
40.     position: absolute;
    
41.     top: 0px;
    
42.     right: 0;
    
43.     left: 0;
    
44.     bottom: 0;
    
45.     border-bottom: 100px solid red;
    
46.     border-right: 100px solid transparent;
    
47.     content: "";
    
48. }
    
49. 
    
50. .f:after {
    
51.     position: absolute;
    
52.     left: 0;
    
53.     right: 1px;
    
54.     top: 1px;
    
55.     bottom: 0;
    
56.     border-bottom: 99px solid white;
    
57.     border-right: 99px solid transparent;
    
58.     content: "";
    
59. }

复制代码

zyw327

学习了！