如何基于纯CSS创建各种图形形状

来源：http://www.codeceo.com/时间：2017-02-17 16:04:13

　　CSS也称作层叠样式表，用于控制网页内容显示情况，它可以控制HTML无法控制的许多属性，利用CSS能实现多种多样的动画效果，之前我们分享过很多CSS3实现的特效、动画及一些游戏，今天再来教大家学习如何使用简单的CSS创建不同类型的平面图形。

　　实例分享

　　矩形

word-wrap: break-word; background-image: none !important; position: static !important; padding: 0px !important; line-height: 1.1em !important; outline-style: none !important; outline-width: 0px !important; width: auto !important; bottom: auto !important; float: none !important; height: auto !important; font-size: 10pt !important; vertical-align: baseline !important; top: auto !important; right: auto !important; left: auto !important;">

`1`	`.rectangle {`

`2`	`width: 250px;`

`3`	`height: 150px;`

`4`	`background-color: #6DC75F;`

5 }

6

7

　　三角形

`1`	`.triangleUp {`

`2`	`border-left: 75px solid transparent;`

`3`	`border-right: 75px solid transparent;`

`4`	`border-bottom: 150px solid #6DC75F;`

`5`	`width: 0;`

`6`	`height: 0;`

7 }

8

`9`	`<div` `class="triangleUp">`

　　椭圆形

01 .oval {

`02`	`width: 300px;`

`03`	`height: 150px;`

`04`	`background: #6DC75F;`

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

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

`07`	`border-radius: 150px / 75px;`

08 }

09

`10`	`<div` `class="oval">`

　　月牙形

1 .moon {

`2`	`width: 150px;`

`3`	`height: 150px;`

`4`	`border-radius: 50%;`

`5`	`box-shadow: 15px 15px 0 0 GREEN;`

6 }

7

`8`	`<div` `class="moon">`

　　树叶

1 .leaf {

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

`3`	`background: #6DC75F;`

`4`	`width: 150px;`

`5`	`height: 150px;`

6 }

7

`8`	`<div` `class="leaf">`

文章内容来源于网络，不代表本站立场，若侵犯到您的权益，可联系我们删除。（本站为非盈利性质网站）联系邮箱：9145908@qq.com

如何基于纯CSS创建各种图形形状

使用HTML, XHTML, 和 CSS创建酷站

如何盘发

Rapid CSS 2024(CSS文档编辑)

merge css(css压缩工具)

战斗形状

形状节奏

完美形状

形状链接

霓虹形状

形状堆栈

形状探索

形状色调