我们学习如何使用简单的css来创建不同类型的平面图形。
使用代码 矩形
.rectangle { width: 250px; height: 150px; background-color: #6dc75f; } <p></p>
三角形
.triangleup { border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid #6dc75f; width: 0; height: 0; } <p class="triangleup"></p>
椭圆形
.oval { width: 300px; height: 150px; background: #6dc75f; -moz-border-radius: 150px / 75px; -webkit-border-radius: 150px / 75px; border-radius: 150px / 75px; } <p class="oval"></p>
月牙形
.moon { width: 150px; height: 150px; border-radius: 50%; box-shadow: 15px 15px 0 0 green; } <p class="moon"></p>
树叶
.leaf { border-radius: 5px 300px 3px 300px; background: #6dc75f; width: 150px; height: 150px; } <p class="leaf"></p>
以上就是使用css创建各种不同的图形形状的方法的详细内容。