程序博客网 > 山东大学生竞赛 知乎

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

来源：互联网 发布：山东大学生竞赛 知乎 编辑：程序博客网 时间：2024/06/03 08:53

转载自http://sd.csdn.net/a/20110815/303110.html

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

Square

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

Rectangle

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

Circle

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

Oval

  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

  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

  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

  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

  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

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

Triangle Top Right

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

Triangle Bottom Left

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

Triangle Bottom Right

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

Parallelogram

  1. #parallelogram { width: 150px; height: 100px;   
  2. -webkit-transform: skew(20deg);   
  3. -moz-transform: skew(20deg);   
  4. -o-transform: skew(20deg); background: red; }

Trapezoid

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

Star (6-points)

  1. #star-six { width: 0; height: 0;   
  2. border-left: 50px solid transparent;   
  3. border-right: 50px solid transparent;   
  4. border-bottom: 100px solid red; position: relative; } #star-six:after { width: 0; height: 0;   
  5. border-left: 50px solid transparent;   
  6. border-right: 50px solid transparent;   
  7. border-top: 100px solid red;   
  8. position: absolute; content: ""; top: 30px; left: -50px; }

Star (5-points) 

  1. #star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent;   
  2. -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg);   
  3. -ms-transform: rotate(35deg); -o-transform: rotate(35deg); }   
  4. #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent;   
  5. border-right: 30px solid transparent;   
  6. position: absolute; height: 0; width: 0; top:   
  7. -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg);   
  8. -moz-transform: rotate(-35deg);   
  9. -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); }   
  10. #star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px;   
  11. border-right: 100px solid transparent;   
  12. border-bottom: 70px solid red;   
  13. border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform:   
  14. rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }

Pentagon

  1. #pentagon {  
  2.  position: relative; width: 54px;   
  3. border-width: 50px 18px 0;   
  4. border-style: solid; border-color: red transparent; } #pentagon:before { content: "";   
  5. position: absolute; height: 0; width: 0;   
  6. top: -85px; left: -18px; border-width: 0 45px 35px;   
  7. border-style: solid;   
  8. border-color: transparent transparent red; }

Hexagon

  1. #hexagon { width: 100px; height: 55px; background: red; position: relative; }   
  2. #hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0;   
  3. border-left: 50px solid transparent; border-right: 50px solid transparent;   
  4. border-bottom: 25px solid red; } #hexagon:after { content: "";  
  5.  position: absolute; bottom: -25px; left: 0; width: 0; height: 0;   
  6. border-left: 50px solid transparent;   
  7. border-right: 50px solid transparent; border-top: 25px solid red; }

Octagon

  1. #octagon { width: 100px; height: 100px;   
  2. background: red; position: relative; }   
  3. #octagon:before { content: ""; position: absolute; top: 0; left: 0;   
  4. border-bottom: 29px solid red;   
  5. border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }  
  6.  #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red;   
  7. border-left: 29px solid #eee;   
  8. border-right: 29px solid #eee; width: 42px; height: 0; }

Heart 

  1. #heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after   
  2. { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0;  
  3.  border-radius: 50px 50px 0 0;   
  4. -webkit-transform: rotate(-45deg);   
  5. -moz-transform: rotate(-45deg);   
  6. -ms-transform: rotate(-45deg);   
  7. -o-transform: rotate(-45deg);   
  8. transform: rotate(-45deg);   
  9. -webkit-transform-origin: 0 100%;   
  10. -moz-transform-origin: 0 100%;   
  11. -ms-transform-origin: 0 100%;   
  12. -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0;   
  13. -webkit-transform: rotate(45deg);   
  14. -moz-transform: rotate(45deg);   
  15. -ms-transform: rotate(45deg);   
  16. -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%;   
  17. -moz-transform-origin: 100% 100%;   
  18. -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }

Infinity 

  1. #infinity { position: relative; width: 212px; height: 100px; }   
  2. #infinity:before,   
  3. #infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px;   
  4. border: 20px solid red; -moz-border-radius: 50px 50px 0 50px;   
  5. border-radius: 50px 50px 0 50px; -webkit-transform:   
  6. rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg);   
  7. -o-transform: rotate(-45deg); transform: rotate(-45deg);   
  8. } #infinity:after { left: auto; right: 0;   
  9. -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0;   
  10. -webkit-transform: rotate(45deg);   
  11. -moz-transform: rotate(45deg);   
  12. -ms-transform: rotate(45deg);   
  13. -o-transform: rotate(45deg); transform: rotate(45deg); }

Diamond

  1. #diamond { width: 80px; height: 80px;   
  2. background: red; margin: 25px 0 15px 35px;   
  3. -webkit-transform: rotate(-45deg);   
  4. -moz-transform: rotate(-45deg);   
  5. -ms-transform: rotate(-45deg);   
  6. -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%;  
  7.  -moz-transform-origin: 0 100%;   
  8. -ms-transform-origin: 0 100%;   
  9. -o-transform-origin: 0 100%; transform-origin: 0 100%; }

Egg

  1. #egg { display:block; width: 126px; height: 180px; background-color: red;   
  2. -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;   
  3. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }

Pac-Man

  1. #pacman { width: 0px; height: 0px;   
  2. border-right: 60px solid transparent;   
  3. border-top: 60px solid red;   
  4. border-left: 60px solid red;   
  5. border-bottom: 60px solid red;  
  6.  border-top-left-radius: 60px;   
  7. border-top-right-radius: 60px;   
  8. border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; }

Talk Bubble

  1. #talkbubble { width: 120px; height: 80px;   
  2. background: red; position: relative;  
  3.  -moz-border-radius: 10px;   
  4. -webkit-border-radius: 10px; border-radius: 10px; } #talkbubble:before { content:"";  
  5.  position: absolute; right: 100%; top: 26px; width: 0; height: 0;   
  6. border-top: 13px solid transparent;   
  7. border-right: 26px solid red;   
  8. border-bottom: 13px solid transparent; }

12 Point Burst 

  1. #burst-12 { background: red; width: 80px; height: 80px;   
  2. position: relative; text-align: center;   
  3. } #burst-12:before, #burst-12:after { content: ""; position: absolute;   
  4. top: 0; left: 0; height: 80px; width: 80px;   
  5. background: red; }   
  6. #burst-12:before   
  7. { -webkit-transform: rotate(30deg);   
  8. -moz-transform: rotate(30deg);   
  9. -ms-transform: rotate(30deg);   
  10. -o-transform: rotate(30deg); transform: rotate(30deg);  
  11.  } #burst-12:after   
  12. { -webkit-transform: rotate(60deg);   
  13. -moz-transform: rotate(60deg);   
  14. -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }

8 Point Burst 

  1. #burst-8 { background: red; width: 80px; height: 80px; position: relative; text-align: center; -webkit-transform: rotate(20deg);  
  2.  -moz-transform: rotate(20deg);   
  3. -ms-transform: rotate(20deg);   
  4. -o-transform: rotate(20eg);   
  5. transform: rotate(20deg);  
  6.  } #burst-8:before { content: ""; position: absolute;   
  7. top: 0; left: 0; height: 80px; width: 80px;   
  8. background: red; -webkit-transform: rotate(135deg);  
  9.  -moz-transform: rotate(135deg);   
  10. -ms-transform: rotate(135deg);  
  11.  -o-transform: rotate(135deg); transform: rotate(135deg); }
山东大学生竞赛 知乎 山东大学生竞赛 知乎
原创粉丝点击
热门IT博客
淘宝助理导出宝贝详情淘宝助理导出宝贝详情
javascript中eval函数javascript中eval函数
淘宝客服在线咨询
解锁软件
传奇世界翅膀进阶数据
网络报纸取代传统报纸
平板怎么进淘宝卖家
美国 二战 知乎
淘宝网夏季连衣裙
数据采集员需要什么
单片机程序下载电路
电脑网络掉线怎么办
sql union 列名
pdf转换mobi软件
官人什么意思 网络
金九银十数据网
庚澈分析知乎
fc2新域名
软件接口测试
王柳雯淘宝店
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 曼陀罗庄园 曼托假体隆胸 做了曼托假体好后悔 曼托假体丰胸真实案例 曼托假体价格 曼托假体隆胸的价格 曼托隆胸 曼托假体隆胸多少钱 曼托水滴假体多少钱 曼托假体隆胸价格表 曼托丰胸多少钱 假体曼托的价格 曼托假体丰胸多少钱 曼托假体隆胸价钱 曼托隆胸要多少钱 曼托假体隆胸安全 隆胸曼托 曼托假体丰胸费用 曼托水滴假体 曼托隆胸哪家医院好 曼托假体隆胸的效果 乳房假体曼托 曼托假体丰胸好不好 曼昆 经济学原理曼昆 经济学原理 曼昆 曼昆宏观经济学第七版 宏观经济学 曼昆 第六版 经济学原理 曼昆 微观 曼昆 经济学原理 曼昆 宏观经济学 曼昆经济学原理 经济学原理 曼曼 曼曼归途 曼曼man 主播曼曼 曼曼有声色读 曼曼丫没钱交房租在线播放 曼曼man高颜值主播下海 花椒女神曼曼

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里