css写宽为30%的正方形

时间：2022-06-22 22:59:21

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

css写宽为30%的正方形

会不会恍然大悟呢？

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style type="text/css">

     /*div{

       background: #c6c;

       margin: 0;

       padding-bottom: 30%;

     }*/

     /*div{

       background: #c6c;

       margin: 0;

       padding: 15% 0;

     }*/

    #dd::after{

     content: "";

     display: block;

     padding-top: 100%;

    }

   </style>

 </head>

 <body>

   <div style="width:30%; background:red;" id="dd"></div>

 </body>

 </html>

7-11为法一

12-16为法二

相关文章