教程：纯用CSS定义写出来的图形写法

用户头像
甄小快
北京/产品设计师/14年前/7778浏览
教程：纯用CSS定义写出来的图形写法
用户头像
甄小快

一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。1.正方形#square { width: 100px; height: 100px; background: red;

一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。



1.正方形



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


2.长方形




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


3.左上三角




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


4.右上三角




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

5.左下三角




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

6.右下三角




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

7.平行四边形




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

8.梯形




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


9.六角星



#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.五角星




#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.五边形




#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.六边形




#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.桃心




#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。无限大符号




#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.蛋




#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.提示对话框




#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.十二角星



#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.八角星



#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.钻石




#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.八卦




#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;
} 

5
举报
|
208
分享
相关推荐
像素画基础知识-认识像素画
像素画基础知识-认识像素画
15
非常实用有趣，鼠标移到文字变色+阴影效果（通过w3验证）
非常实用有趣，鼠标移到文字变色+阴影效果（通过w3验证）
15
网页中实现透明度的方法（普及）
网页中实现透明度的方法（普及）
9266
HTML图片按钮写法
HTML图片按钮写法
2.5w
新更新，纯CSS下拉列表菜单，超实用！（依然欢迎纠错）
新更新，纯CSS下拉列表菜单，超实用！（依然欢迎纠错）
1.1w
科幻扁平
科幻扁平
科幻扁平
科幻扁平
科幻扁平
489
用JAVASCRIPT实现最简单的下拉菜单方式~
用JAVASCRIPT实现最简单的下拉菜单方式~
6359
2012年除夕夜小区内的烟花拍摄
2012年除夕夜小区内的烟花拍摄
2199
日常整理收集超市、商场、户外、等POP字体海报（复古）不过现在已经没什么人这么用了吧？
日常整理收集超市、商场、户外、等POP字体海报（复古）不过现在已经没什么人这么用了吧？
88
暮秋时雨-平面设计-简历（电商，网页设计）
会员精选
暮秋时雨-平面设计-简历（电商，网页设计）
52
已加入PRO计划
推广
javascript常用文字移动特效方法简洁版第一季
javascript常用文字移动特效方法简洁版第一季
1718
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
平面书法字手写
金色颗粒质地的平面
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
牛奶乳液层次梯田平铺平面
平面设计 吊牌设计
中国传统纹样创新图案设计
金色颗粒质地的平面
“知识宅急送”外卖，快递，平面，海报，素材，教育
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
平面男孩喝咖啡插画设计
平面插画设计女孩喝咖啡
平面花卉图案扁平简约无缝拼接插画
水蜜桃和李子的平面水果图案
牛奶乳液层次平面平铺平面
玄关入门地毯印花图案红地毯
城市园林平面布局航拍
城阙凡花
金色颗粒质地的平面
城市园林平面布局航拍
空的平台平面和自然景观
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
海底世界插画
平面插画情侣/矢量
学习，优惠券，平面，海报
你可能喜欢
波点视觉x小孔呈相品牌设计
波点视觉x小孔呈相品牌设计
292
站酷推荐团队
JoySeason 久食山 Visual Identity and Packaging
JoySeason 久食山 Visual Identity and Packaging
140
站酷推荐设计师
半马 | DearMom罗马假日婴儿推车产品设计CMF设计创新
半马 | DearMom罗马假日婴儿推车产品设计CMF设计创新
628
站酷推荐团队
吨吨咖品牌包装设计
吨吨咖品牌包装设计
135
NIGHT BLOOM｜一个人的造梦计划
NIGHT BLOOM｜一个人的造梦计划
260
站酷推荐插画师 站酷超级AI设计师
余悦品牌设计&包装设计 | nofans design
余悦品牌设计&包装设计 | nofans design
242
站酷推荐设计师
相关收藏夹
科幻扁平
科幻扁平
科幻扁平
科幻扁平
科幻扁平
489
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
7697
站酷推荐设计师
中国风元素插画
中国风元素插画
中国风元素插画
中国风元素插画
中国风元素插画
507
站酷推荐设计师
IP形象——动物类
IP形象——动物类
IP形象——动物类
IP形象——动物类
IP形象——动物类
584
茶酒丨礼盒包装
茶酒丨礼盒包装
茶酒丨礼盒包装
茶酒丨礼盒包装
茶酒丨礼盒包装
664
品牌VI系统
品牌VI系统
品牌VI系统
品牌VI系统
品牌VI系统
2020
大家都在看
IP 形象国庆LOGO 设计海报设计插画设计壁纸图片作品集VI 设计UI 设计规范AI 绘画表情包PPT模板设计’设计inin设计it设计AS设计by设计a设计、设计设计、 设计#设计#设计‘’is设计设计‘ 设计设计。#设计if设计设计】设计，设计@设计an设计 设计🤮设计设计 、设计／设计|设计.设计 #设计  #设计 #设计设计#设计a设计🔍 a设计设计
登录注册
5登录即可同步推荐记录哦
99+登录即可加入我的收藏
评论登录即可评论想法
分享分享