css 如何生成一个正方形呢?


摘要:
下文讲述使用css代码生成正方形的方法说明,如下所示;

实现思路:  
     将 height:0 此时padding-top的值就同width相等,
   此时padding-top:100%即为正方形
       padding-top:50%即为长方形

例:
css 巧妙生成正方形的方法分享

 <meta charset="UTF-8">
<p>
 maomao365.com <br />
 css巧妙生成正方形的方法分享
</p>
<hr /> 
<style>
  div{
    background-color:green;
    margin:10px;
  }

.d1{
   height:0;
   width:100px;
   padding-top:100px;
 }

.d2{
   height:0;
   width:100px;
   padding-top:50px;
 }
</style>
 
<div class="d1">
</div>

<div class="d2">
</div>
css巧妙的生成正方形的示例分享

css巧妙的生成正方形的示例分享