在使用css的html中,如何创建不同的形状

分享于 

2分钟阅读

Web开发

  繁體

介绍

Guys让我们学习如何使用简单的css创建不同类型的冷色,而不用使用图像。

使用代码

Ractangle


<code>.rectangle {


 width: 250px;


 height: 150px;


 background-color: #6DC75F;


}



<div class="rectangle"></div></code>



三角形


<code>.triangleUp {


 border-left: 75px solid transparent;


 border-right: 75px solid transparent;


 border-bottom: 150px solid #6DC75F;


 width: 0;


 height: 0;


 }



<div class="triangleUp"></div></code>



椭圆


<code>.oval {


 width: 300px;


 height: 150px;


 background: #6DC75F;


 -moz-border-radius: 150px/75px;


 -webkit-border-radius: 150px/75px;


 border-radius: 150px/75px;


}



<div class="oval"></div></code>



神奇的月亮


<code>.moon {


 width: 150px;


 height: 150px;


 border-radius: 50%;


 box-shadow: 15px 15px 0 0 green;


}



<div class="moon"></div></code>




<code>.leaf {


 border-radius: 5px 300px 3px 300px;


 background: #6DC75F;


 width: 150px;


 height: 150px;


}



<div class="leaf"></div></code>



Points of Interest

用css你可以做惊人的事情。

快乐编码。


SHA  Shape  Shapes  
相关文章