圆

width:120px;

height:120px;

border-radius:60px;

正方形

width:120px;

height:120px;

椭圆

width:200px;

height:100;

border-radius:100px;

三角(正)

width:0;

height:0;

border-bottom: 140px solid #fcf921;

border-left: 70px solid transparent;

border-right: 70px solid transparent;

三角形(倒)

width: 0;

height: 0;

border-top: 140px solid #20a3bf;

border-left: 70px solid transparent;

border-right: 70px solid transparent;三角形(左)

width: 0;

height: 0;

border-top: 70px solid transparent;

border-right: 140px solid #6bbf20;

border-bottom: 70px solid transparent;

三角形(右)

width: 0;

height: 0;

border-top: 70px solid transparent;

border-left: 140px solid #ff5a00;

border-bottom: 70px solid transparent;

菱形

width: 120px;

height: 120px;

background: #1eff00;

/* Rotate */

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

/* Rotate Origin */

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

margin: 60px 0 10px 310px;

梯形

height: 0;

width: 120px;

border-bottom: 120px solid #ec3504;

border-left: 60px solid transparent;

border-right: 60px solid transparent;

平行四边形

width: 160px;

height: 100px;

background: #8734f7;

-webkit-transform: skew(30deg);

-moz-transform: skew(30deg);

-o-transform: skew(30deg);

transform: skew(30deg);

五角星

#star {

width: 0;

height: 0;

margin: 50px 0;

color: #fc2e5a;

position: relative;

display: block;

border-right: 100px solid transparent;

border-bottom: 70px solid #fc2e5a;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star:before {

height: 0;

width: 0;

position: absolute;

display: block;

top: -45px;

left: -65px;

border-bottom: 80px solid #fc2e5a;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

content: '';

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

}

#star:after {

content: '';

width: 0;

height: 0;

position: absolute;

display: block;

top: 3px;

left: -105px;

color: #fc2e5a;

border-right: 100px solid transparent;

border-bottom: 70px solid #fc2e5a;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

}

六角星

#star_six_points {

width: 0;

height: 0;

display: block;

position: absolute;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #de34f7;

margin: 10px auto;

}

#star_six_points:after {

content: "";

width: 0;

height: 0;

position: absolute;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #de34f7;

margin: 30px 0 0 -50px;

}

五边形(创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形)

#pentagon {

width: 54px;

position: relative;

border-width: 50px 18px 0;

border-style: solid;

border-color: #277bab transparent;

}

#pentagon:before {

content: "";

height: 0;

width: 0;

position: absolute;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent #277bab;

}

六边形(像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。)

#hexagon {

width: 100px;

height: 55px;

background: #fc5e5e;

position: relative;

margin: 10px auto;

}

#hexagon:before {

content: "";

width: 0;

height: 0;

position: absolute;

top: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid #fc5e5e;

}

#hexagon:after {

content: "";

width: 0;

height: 0;

position: absolute;

bottom: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid #fc5e5e;

}

八角形(先制作两个相同的梯形，然后在两边分别放置一个三角形。)

#octagon {

width: 100px;

height: 100px;

background: #ac60ec;

position: relative;

}

#octagon:before {

content: "";

width: 42px;

height: 0;

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid #ac60ec;

border-left: 29px solid #f4f4f4;

border-right: 29px solid #f4f4f4;

}

#octagon:after {

content: "";

width: 42px;

height: 0;

position: absolute;

bottom: 0;

left: 0;

border-top: 29px solid #ac60ec;

border-left: 29px solid #f4f4f4;

border-right: 29px solid #f4f4f4;

}

心形(使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。)

#heart {

position: relative;

}

#heart:before,#heart:after {

content: "";

width: 70px;

height: 115px;

position: absolute;

background: red;

left: 70px;

top: 0;

-webkit-border-radius: 50px 50px 0 0;

-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%;

}

鸡蛋形(蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。)

#egg {

width: 136px;

height: 190px;

background: #ffc000;

display: block;

-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

无穷符号(无穷符号可以通过border属性和设置伪元素的角度来实现。)

#infinity {

width: 220px;

height: 100px;

position: relative;

}

#infinity:before,#infinity:after {

content: "";

width: 60px;

height: 60px;

position: absolute;

top: 0;

left: 0;

border: 20px solid #06c999;

-moz-border-radius: 50px 50px 0;

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);

}

消息提示框

#comment_bubble {

width: 140px;

height: 100px;

background: #088cb7;

position: relative;

-moz-border-radius: 12px;

-webkit-border-radius: 12px;

border-radius: 12px;

}

#comment_bubble:before {

content: "";

width: 0;

height: 0;

right: 100%;

top: 38px;

position: absolute;

border-top: 13px solid transparent;

border-right: 26px solid #088cb7;

border-bottom: 13px solid transparent;

}

吃豆小怪兽(先在一个圆形里面制作一个透明的三角形。)

#pacman {

width: 0;

height: 0;

border-right: 70px solid transparent;

border-top: 70px solid #ffde00;

border-left: 70px solid #ffde00;

border-bottom: 70px solid #ffde00;

border-top-left-radius: 70px;

border-top-right-radius: 70px;

border-bottom-left-radius: 70px;

border-bottom-right-radius: 70px;

}

HTML怎么写入形状,css3写各种形状（收集篇...）相关推荐

  1. 20个纯css3写的logo

    2019独角兽企业重金招聘Python工程师标准>>> 随着对css3了解得越深入,越来越发现了css3的强大.css3不但能完成一些基本的特效如圆角阴影等,还能借助动画技术实现一些 ...

  2. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下  在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  3. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  4. 用html+css3写一个小丸子的头像

    启发是看到一篇博客用css3写的一个叮当猫http://www.cnblogs.com/jr1993/p/4448025.html,于是自己就想写个小丸子了. <!DOCTYPE html> ...

  5. 【ps】ps cc中普通形状如何变成实时形状

    众所周知,ps cc中加入了实时形状属性面板,当你使用形状工具划出形状的时候,这个面板就会自动跳出.主要方便你修改形状的圆角等属性.但是画好的形状有时候点击出来的面板只有蒙版,没有实时形状属性,这时候 ...

  6. 用Html标签和CSS3写的一个手机

    手机外形上来说就是长方形,然后加上圆角边框,如果是简单的平面图形,几分钟就可以用html标签和css写一个手机模型.但如果有高光,菱角等让手机展示的更逼真,可以用到css背景渐变属性. 预览页面:CS ...

  7. visio调整形状位置_visio 设置形状的格式

    为形状中的文本设置格式 对于形状中的文本,可以更改其字体.字符间距.段落间距和对齐方式.文本块的定位.项目符号或编号,以及制表位. 快速任务 任务 操作 在形状中添加文本 在页面中选择相应形状,然后键 ...

  8. visio中形状如何链接到形状

    有的时候我们希望在Visio中实现点击一个形状跳转到另一个(另一页)形状的功能,这样在用多个子模块来表示一个复杂的系统时在显得条理清晰的同时也便于跟踪,以下我将演示如何实现这样的效果. 这里我新建立一 ...

  9. 1.animation 判断动画结束，结束后执行另一事件；2.用css3写竖条纹背景

    1.用css3的animation完成一个动画,并监听动画结束后才执行另一个事的实现方法: 动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以 2.用css3写带透明色的 ...

  10. 判刑形状模型_主动形状模型 - 作业部落 Cmd Markdown 编辑阅读器

    主动形状模型 机器学习 常见使用场景 ASM 模型是一种基于统计形变模型的分割算法.在分割图像时,综合考虑了图像的大小.灰度.大致位置和图像形状等先验知识.它使用从训练样本得到的统计模型作为初始位置, ...

最新文章

  1. pip 升级_python的pip命令
  2. NBU网络备份大全之oracle系统冷备份
  3. 基于bert的语义匹配_构建基于BERT的语义搜索系统…针对“星际迷航”
  4. 插件开发-UI插件开发
  5. 天津理工计算机通信工程学院,2018年天津理工大学计算机与通信工程学院811信号与系统考研仿真模拟五套题...
  6. python语法训练_18-04-17回顾: python3语法+刻意训练
  7. 实战：小程序购物商城
  8. 电涡流传感器9200-06-05-10-00本特利
  9. CSR8615蓝牙芯片功能调试入门笔记------ 下
  10. android png 图标制作,ico图标怎么制作？png图片文件转换成ico图标文件的教程
  11. 面部识别科普(刷脸支付)
  12. 几个设计原则的优先级排序
  13. 使用Arduino连接一个LCD显示屏
  14. AD18添加LOGO图标更改大小
  15. [转] TCP/IP原理、基础以及在Linux上的实现
  16. Python下openCV打开图片的几种方式/适应窗口大小
  17. ViewPager简单使用（四）实现图片轮播
  18. python 广义线性模型_数学建模/机器学习：广义加性模型(GAM)及其Python实现
  19. 计算机截屏无法保存,win10系统截图无法保存的两种解决方法
  20. BLE 协议栈之 主机透传

热门文章

  1. 蓝桥杯2015年第六届C/C++省赛B组第三题-三羊献瑞
  2. 7-1 特殊a串数列求和 (20 分)
  3. adb服务无法开启问题解决方法
  4. better-scroll在vue中的使用
  5. Oracle中判断字段是否为数字
  6. svn: E155004 is already locked 解决方案
  7. 使用Memcache在PHP中调试方法的介绍及应用
  8. Ext-数据交换-ajax
  9. OpenGL纹理-12.5、纹理坐标
  10. web安全day21：学习使用最基本的批处理程序