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>
