sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > css3制作各类图形(一)

css3制作各类图形(一)

作者:xuhongji发布时间:2020-09-18分类:Html浏览:25评论:0


导读:1、Square#square{width:100px;height:100px;background:red;}2、Rectan...

1、Square

#square { 
width
: 100px;
height
: 100px;
background
: red; }

2、Rectangle

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }

3、Circle

#circle {
width: 100px;
height
: 100px;
background
: red;
-moz-border-radius
: 50px;
-webkit-border-radius
: 50px; border-radius: 50px; }
/* Cleaner, but slightly less support: use "50%" as value */

4、Oval

#oval { 
width
: 200px;
height
: 100px;
background
: red;
-moz-border-radius
: 100px / 50px;
-webkit-border-radius
: 100px / 50px;
border-radius
: 100px / 50px; }
/* Cleaner, but slightly less support: use "50%" as value */

5、Triangle Up

#triangle-up { 
width
: 0;
height
: 0;
border-left
: 50px solid transparent;
border-right
: 50px solid transparent;
border-bottom
: 100px solid red; }

6、Triangle Down

#triangle-down { 
width
: 0;
height
: 0;
border-left
: 50px solid transparent;
border-right
: 50px solid transparent;
border-top
: 100px solid red; }

7、Triangle Left

#triangle-left { 
width
: 0;
height
: 0;
border-top
: 50px solid transparent;
border-right
: 100px solid red;
border-bottom
: 50px solid transparent; }

8、Triangle Right

#triangle-right { 
width
: 0;
height
: 0;
border-top
: 50px solid transparent;
border-left
: 100px solid red;
border-bottom
: 50px solid transparent; }

9、Triangle Top Left

#triangle-topleft { 
width
: 0;
height
: 0;
border-top
: 100px solid red;
border-right
: 100px solid transparent; }

10、Triangle Top Right

#triangle-topright { 
width
: 0;
height
: 0;
border-top
: 100px solid red;
border-left
: 100px solid transparent; }

11、Triangle Bottom Left

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }0

12、Triangle Bottom Right

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }1

13、Curved Tail Arrow

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }2

14、Trapezoid

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }3

15、Parallelogram

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }4

16、Star (6-points)

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }5

17、Star (5-points)

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }6

18、Pentagon

#rectangle { 
width
: 200px;
height
: 100px;
background
: red; }7


欢迎 发表评论:

Html排行
«   2021年1月   »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
网站分类
文章归档
最近发表
推荐文章