1. 云栖社区>
  2. PHP教程>
  3. 正文

纯CSS创建各种不同的图形形状

作者:用户 来源:互联网 时间:2017-12-01 10:57:05

图形形状

纯CSS创建各种不同的图形形状 - 摘要: 本文讲的是纯CSS创建各种不同的图形形状,  介绍今天,我们要学习如何使用简单的CSS来创建不同类型的平面图形。  使用代码矩形.rectangle { width: 250px; height: 150px; background-color: #6DC75F


 介绍

今天,我们要学习如何使用简单的CSS来创建不同类型的平面图形。


 使用代码

矩形


纯CSS创建各种不同的图形形状
.rectangle {    width: 250px;    height: 150px;    background-color: #6DC75F;}<div></div>


三角形


纯CSS创建各种不同的图形形状
.triangleUp {    border-left: 75px solid transparent;    border-right: 75px solid transparent;    border-bottom: 150px solid  #6DC75F;    width: 0;    height: 0;}<div class="triangleUp"></div>


椭圆形


纯CSS创建各种不同的图形形状
.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>


月牙形


纯CSS创建各种不同的图形形状
.moon {  width: 150px;  height: 150px;  border-radius: 50%;  box-shadow: 15px 15px 0 0 green;}<div class="moon"></div>


树叶


纯CSS创建各种不同的图形形状
.leaf {    border-radius: 5px 300px 3px 300px;    background: #6DC75F;    width: 150px;    height: 150px;}<div class="leaf"></div>


 兴趣点

CSS能让你完成很多令人惊艳的事情…祝大家编码愉快。

原文:How to create different shapes in html using css 译文:codeceo纯CSS创建各种不同的图形形状

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索图形 形状 ,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备