css写宽为30%的正方形

如何用纯css写一宽为30%的正方形，用到了padding属性；

会不会恍然大悟呢？

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style type="text/css">
 7     /*div{
 8       background: #c6c;
 9       margin: 0;
10       padding-bottom: 30%;
11     }*/
12     /*div{
13       background: #c6c;
14       margin: 0;
15       padding: 15% 0;
16     }*/
17    #dd::after{
18     content: "";
19     display: block;
20     padding-top: 100%;
21    }
22 
23   </style>
24 </head>
25 <body>
26   <div style="30%; background:red;" id="dd"></div>
27   
28 </body>
29 </html>

7-11为法一

12-16为法二