教您如何用CSS定义各种图形 | ImapBox

教您如何用CSS定义各种图形

16 八月
星期日, 16 八月 2015 11:10 Last Updated on 星期日, 16 八月 2015 11:10 0 Comments

文中例举的这些图形都是基于HTML，建议使用Chrome、Firefox浏览器打开，可查看CSS代码。

Square

教您如何用CSS定义各种图形

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

Rectangle

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

Circle

教您如何用CSS定义各种图形

  1. #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 

Oval

教您如何用CSS定义各种图形

  1. #oval {   
  2. width: 200px;   
  3. height: 100px;   
  4. background:   
  5. red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 

Triangle Up

教您如何用CSS定义各种图形

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

Triangle Down

教您如何用CSS定义各种图形

  1. #triangle-down {   
  2. width: 0; height: 0;   
  3. border-left: 50px solid transparent;   
  4. border-right: 50px solid transparent;   
  5. border-top: 100px solid red; }  

Triangle Left

教您如何用CSS定义各种图形

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

Triangle Right

教您如何用CSS定义各种图形

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

Triangle Top Left

教您如何用CSS定义各种图形

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

Triangle Top Right

教您如何用CSS定义各种图形

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

Triangle Bottom Left

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

0

Triangle Bottom Right

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

1

Parallelogram

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

2

Trapezoid

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

3

Star (6-points)

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

4

Star (5-points)

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

5

Pentagon

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

6

Hexagon

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

7

Octagon

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

8

Heart

教您如何用CSS定义各种图形

  1. #rectangle {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     background: red;  
  5. } 

9

Infinity

教您如何用CSS定义各种图形

  1. #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 

0

Diamond

教您如何用CSS定义各种图形

  1. #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 

1

Egg

教您如何用CSS定义各种图形

  1. #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 

2

Pac-Man

教您如何用CSS定义各种图形

  1. #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 

3

Talk Bubble

教您如何用CSS定义各种图形

  1. #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 

4

12 Point Burst

教您如何用CSS定义各种图形

  1. #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 

5

8 Point Burst

教您如何用CSS定义各种图形

  1. #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 

6

原文出自：css-tricks.com



 
 
 
 


本页所有内容来自官方网站 https://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: https://www.imapbox.com/download/ImageBox.5.8.0_Build20141205_CHS_Bit32.exe

非凡下载站地址：https://www.crsky.com/soft/35838.html

本网页所有文字内容由 imapbox邮箱云存储,邮箱网盘, iurlBox网页地址收藏管理器 下载并得到。

ImapBox 邮箱网盘 工具地址: https://www.imapbox.com/download/ImapBox.5.5.1_Build20141205_CHS_Bit32.exe

PC6下载站地址：PC6下载站分流下载

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox 网页视频 工具地址: https://www.imapbox.com/download/ImovieBox4.7.0_Build20141115_CHS.exe

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录