DDR爱好者之家

用CSS代码写出的各种形状图形的方法
站长资源 2024/12/29 佚名
74 1538
DDR爱好者之家 Design By 杰米
一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。

1.正方形

用CSS代码写出的各种形状图形的方法

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


2.长方形

用CSS代码写出的各种形状图形的方法


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

3.左上三角

用CSS代码写出的各种形状图形的方法


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


4.右上三角

用CSS代码写出的各种形状图形的方法


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

5.左下三角

用CSS代码写出的各种形状图形的方法


  #triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red;  border-right: 100px solid transparent; }
6.右下三角

用CSS代码写出的各种形状图形的方法


  #triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red;  border-left: 100px solid transparent; }
7.平行四边形

用CSS代码写出的各种形状图形的方法


  #parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg);   -moz-transform: skew(20deg);     -o-transform: skew(20deg); background: red; }
8.梯形

用CSS代码写出的各种形状图形的方法


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

9.六角星

用CSS代码写出的各种形状图形的方法

#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; }

10.五角星

用CSS代码写出的各种形状图形的方法


  #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;    -moz-transform:    rotate(35deg);    -webkit-transform: rotate(35deg);    -ms-transform:     rotate(35deg);    -o-transform:      rotate(35deg); } #star-five:before {    border-bottom: 80px solid red;    border-left: 30px solid transparent;    border-right: 30px solid transparent;    position: absolute;    height: 0;    width: 0;    top: -45px;    left: -65px;    display: block;    content: '';    -webkit-transform: rotate(-35deg);    -moz-transform:    rotate(-35deg);    -ms-transform:     rotate(-35deg);    -o-transform:      rotate(-35deg);     } #star-five:after {    position: absolute;    display: block;    color: red;    top: 3px;    left: -105px;    width: 0px;    height: 0px;    border-right: 100px solid transparent;    border-bottom: 70px solid red;    border-left: 100px solid transparent;    -webkit-transform: rotate(-70deg);    -moz-transform:    rotate(-70deg);    -ms-transform:     rotate(-70deg);    -o-transform:      rotate(-70deg);    content: ''; }

11.五边形

用CSS代码写出的各种形状图形的方法


  #pentagon {     position: relative;     width: 54px;     border-width: 50px 18px 0;     border-style: solid;     border-color: red transparent; } #pentagon:before {     content: "";     position: absolute;     height: 0;     width: 0;     top: -85px;     left: -18px;     border-width: 0 45px 35px;     border-style: solid;     border-color: transparent transparent red; }
12.六边形

用CSS代码写出的各种形状图形的方法


  #hexagon { width: 100px; height: 55px; background: red; position: relative; } #hexagon:before { content: ""; position: absolute; top: -25px;  left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } #hexagon:after { content: ""; position: absolute; bottom: -25px;  left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }

13.桃心

用CSS代码写出的各种形状图形的方法


  #heart {     position: relative;     width: 100px;     height: 90px; } #heart:before, #heart:after {     position: absolute;     content: "";     left: 50px;     top: 0;     width: 50px;     height: 80px;     background: red;     -moz-border-radius: 50px 50px 0 0;     border-radius: 50px 50px 0 0;     -webkit-transform: rotate(-45deg);        -moz-transform: rotate(-45deg);         -ms-transform: rotate(-45deg);          -o-transform: rotate(-45deg);             transform: rotate(-45deg);     -webkit-transform-origin: 0 100%;        -moz-transform-origin: 0 100%;         -ms-transform-origin: 0 100%;          -o-transform-origin: 0 100%;             transform-origin: 0 100%; } #heart:after {     left: 0;     -webkit-transform: rotate(45deg);        -moz-transform: rotate(45deg);         -ms-transform: rotate(45deg);          -o-transform: rotate(45deg);             transform: rotate(45deg);     -webkit-transform-origin: 100% 100%;        -moz-transform-origin: 100% 100%;         -ms-transform-origin: 100% 100%;          -o-transform-origin: 100% 100%;             transform-origin :100% 100%; }
14。无限大符号

用CSS代码写出的各种形状图形的方法


  #infinity {     position: relative;     width: 212px;     height: 100px; }
  #infinity:before, #infinity:after {     content: "";     position: absolute;     top: 0;     left: 0;     width: 60px;     height: 60px;         border: 20px solid red;     -moz-border-radius: 50px 50px 0 50px;          border-radius: 50px 50px 0 50px;     -webkit-transform: rotate(-45deg);        -moz-transform: rotate(-45deg);         -ms-transform: rotate(-45deg);          -o-transform: rotate(-45deg);             transform: rotate(-45deg); }
  #infinity:after {     left: auto;     right: 0;     -moz-border-radius: 50px 50px 50px 0;          border-radius: 50px 50px 50px 0;     -webkit-transform: rotate(45deg);        -moz-transform: rotate(45deg);         -ms-transform: rotate(45deg);          -o-transform: rotate(45deg);             transform: rotate(45deg); }
15.蛋

用CSS代码写出的各种形状图形的方法


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

16.提示对话框

用CSS代码写出的各种形状图形的方法


  #talkbubble {    width: 120px;     height: 80px;     background: red;    position: relative;    -moz-border-radius:    10px;     -webkit-border-radius: 10px;     border-radius:         10px; } #talkbubble:before {    content:"";    position: absolute;    right: 100%;    top: 26px;    width: 0;    height: 0;    border-top: 13px solid transparent;    border-right: 26px solid red;    border-bottom: 13px solid transparent; }

17.十二角星
用CSS代码写出的各种形状图形的方法


  #burst-8 {     background: red;     width: 80px;     height: 80px;     position: relative;     text-align: center;     -webkit-transform: rotate(20deg);        -moz-transform: rotate(20deg);         -ms-transform: rotate(20deg);          -o-transform: rotate(20eg);             transform: rotate(20deg); } #burst-8:before {     content: "";     position: absolute;     top: 0;     left: 0;     height: 80px;     width: 80px;     background: red;     -webkit-transform: rotate(135deg);        -moz-transform: rotate(135deg);         -ms-transform: rotate(135deg);          -o-transform: rotate(135deg);             transform: rotate(135deg); }

18.八角星

用CSS代码写出的各种形状图形的方法

#burst-8 {     background: red;     width: 80px;     height: 80px;     position: relative;     text-align: center;     -webkit-transform: rotate(20deg);        -moz-transform: rotate(20deg);         -ms-transform: rotate(20deg);          -o-transform: rotate(20eg);             transform: rotate(20deg); } #burst-8:before {     content: "";     position: absolute;     top: 0;     left: 0;     height: 80px;     width: 80px;     background: red;     -webkit-transform: rotate(135deg);        -moz-transform: rotate(135deg);         -ms-transform: rotate(135deg);          -o-transform: rotate(135deg);             transform: rotate(135deg); }

19.钻石

用CSS代码写出的各种形状图形的方法


  #cut-diamond {     border-style: solid;     border-color: transparent transparent red transparent;     border-width: 0 25px 25px 25px;     height: 0;     width: 50px;     position: relative;     margin: 20px 0 50px 0; } #cut-diamond:after {     content: "";     position: absolute;     top: 25px;     left: -25px;     width: 0;     height: 0;     border-style: solid;     border-color: red transparent transparent transparent;     border-width: 70px 50px 0 50px; }

20.八卦

用CSS代码写出的各种形状图形的方法
  #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; }
  #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; }
  #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; } 
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米