css 画小三角形的方法 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style>
 7         .outerDiv {
 8             margin: 100px;
 9             width: 100px;
10             height: 100px;
11             background-color: aqua;
12             position: relative;
13             /*transform: translate(50%, 50%);*/ /*平移*/
14         }
15             .outerDiv:after {
16                 position: absolute;
17                 content: '';
18 
19                 /*方法一：通过width、height以及z-index来实现*/
20                 width: 20px;
21                 height: 20px;
22                 background-color: red;
23                 z-index: -1; /*隐藏不需要的部分*/
24 
25                 /*方法二：通过border以及border颜色来实现*/
26                 /*border-top: 20px solid transparent;
27                 border-bottom: 20px solid blue;
28                 border-right: 20px solid transparent;
29                 border-left: 20px solid yellow;*/
30 
31                 bottom: 30%;
32                 left: 90%;
33                 -webkit-transform: rotate(-135deg);
34                 transform: rotate(-135deg);
35 
36                 box-shadow: -2px 2px 2px 0px black; /*水平，垂直, 模糊距离，阴影尺寸，颜色，inset/outset 内部阴影外部阴影*/
37             }
38     </style>
39 </head>
40 <body>
41 <div class="outerDiv">
42 </div>
43 </body>
44 </html>

 

posted @ 2021-01-27 17:35  碗粥  阅读(77)  评论(0)    收藏  举报