1、圆形

CSS代码如下：宽高一样，border-radius设为宽高的一半



#circle {

    width: 100px;

    height: 100px;

    background: red;

    -moz-border-radius: 50px;

    -webkit-border-radius: 50px;

    border-radius: 50px;

}




2、椭圆




CSS代码如下：border-radius:水平半径/垂直半径




#oval {

    width: 200px;

    height: 100px;

    background: red;

    -moz-border-radius: 100px / 50px;

    -webkit-border-radius: 100px / 50px;

    border-radius: 100px / 50px;

}





3、等边三角




上三角CSS代码如下：设置border-bottom宽度实线颜色，左右border左右宽度为一半，实线透明。下三角、左三角、右三角可举一反三实现。




#triangle-up {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

}





4、直角三角




左上三角CSS代码如下：border-top设置宽度实线颜色，border-right等宽实线透明。右上三角、左下三角、右下三角可举一反三实现。




#triangle-topleft {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

}




5、平行四边形




CSS代码如下：transform: skew，倾斜角度即为四边形锐角的余角




#parallelogram {

    width: 150px;

    height: 100px;

    margin-left:20px;

    -webkit-transform: skew(20deg);

       -moz-transform: skew(20deg);

         -o-transform: skew(20deg);

    background: red;

}




6、梯形




CSS代码如下：上底长为width的值，下底长为width+border-left+border-right之和，高为border-bottom




#trapezoid {

    border-bottom: 100px solid red;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    height: 0;

    width: 100px;

}




7、五边形（五角大楼）




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;

}




8、六边形




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;

}




9、八边形




CSS代码如下：




#octagon {

    width: 100px;

    height: 100px;

    background: red;

    position: relative;

}

#octagon:before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    border-bottom: 29px solid red;

    border-left: 29px solid #eee;

    border-right: 29px solid #eee;

    width: 42px;

    height: 0;

}

#octagon:after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    border-top: 29px solid red;

    border-left: 29px solid #eee;

    border-right: 29px solid #eee;

    width: 42px;

    height: 0;

}









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代码如下：一个上三角和一个下三角拼合而成




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

}




12、八角星




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

}




13、十二角星




CSS代码如下：






#burst-12 {

    background: red;

    width: 80px;

    height: 80px;

    position: relative;

    text-align: center;

}

#burst-12:before, #burst-12:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    height: 80px;

    width: 80px;

    background: red;

}

#burst-12:before {

    -webkit-transform: rotate(30deg);

       -moz-transform: rotate(30deg);

        -ms-transform: rotate(30deg);

         -o-transform: rotate(30deg);

            transform: rotate(30deg);

}

#burst-12:after {

    -webkit-transform: rotate(60deg);

       -moz-transform: rotate(60deg);

        -ms-transform: rotate(60deg);

         -o-transform: rotate(60deg);

            transform: rotate(60deg);

}


14、爱心




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

}               




15、无穷大符号




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

}






16、鸡蛋




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

}




17、食豆人（Pac-Man）






CSS代码如下：




#pacman {

  width: 0px;

  height: 0px;

  border-right: 60px solid transparent;

  border-top: 60px solid red;

  border-left: 60px solid red;

  border-bottom: 60px solid red;

  border-top-left-radius: 60px;

  border-top-right-radius: 60px;

  border-bottom-left-radius: 60px;

  border-bottom-right-radius: 60px;

}




 




18、提示对话框




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;

}





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;

}








												


											
CSS矩形、三角形等的更多相关文章
	

    
						
  1. CSS 制作三角形原理剖析
		
    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
    
		
    2. 
						
  2. css制作三角形，下拉框三角形
		
    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...
    
		
    3. 
						
  3. css画三角形原理解析
		
    <div id="div1"></div><div id="div2"></div><div id=&qu ...
    
		
    4. 
						
  4. 纯css画三角形
		
    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
    
		
    5. 
						
  5. CSS制作三角形和按钮
		
    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
    
		
    6. 
						
  6. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
		
    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
    
		
    7. 
						
  7. CSS实现三角形
		
    突然想起搞一把三角形. 简单来说: 建一个div  宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
    
		
    8. 
						
  8. css绘制三角形原理
		
    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
    
		
    9. 
						
  9. 纯CSS写三角形-border法
		
    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
    
		
    10. 
						
  10. 经典CSS实现三角形图标原理解析
		
    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 手把手使用Git？
			
    下载和安装:Git下载和安装教程 学习使用Git:学习Git 安装TortoiseGit:教程 TortoiseGit与Git生成SSH密钥添加到GitHub账号的简单方法:解决方法
    
			
    2. 
						
  2. 2018-2019-2 20165231 王杨鸿永 Exp6 信息搜集与漏洞扫描
			
    实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服 ...
    
			
    3. 
						
  3. python封装configparser模块获取conf.ini值
			
    configparser模块是python自带的从文件中获取固定格式参数的模块,因为是python只带的,大家用的应该很多,我觉得这个参数模块比较灵活,添加参数.修改参数.读取参数等都有对应的参数供用 ...
    
			
    4. 
						
  4. webpack4学习笔记
			
    执行webpack-dev-server的时候不会自动生成dist打包目录,怪不得公司的项目里面都没用到webpack-dev-server呢 执行webpack的时候会生成dist目录 watch的 ...
    
			
    5. 
						
  5. 将mysql中的一张表中的一个字段数据根据条件导入另一张表中
			
    添加字段:alter table matInformation add facid varchar(99)  default ''; 导入数据:update matInformation m set  ...
    
			
    6. 
						
  6. jupyter4.4.0自定义目录
			
    百度是有技巧的,现在百度的基本上都是2年前的帖子,对于最新的版本都不适用 对于jupyter自定义目录都是修改配置文件,这个对于jupyter4.4.0不适用: 1.在桌面创建jupyter-note ...
    
			
    7. 
						
  7. java类(Class)的概念；对象的概念，声明类的属性 和方法，局部变量和成员变量，面向对象编程思维,抽象的概念
			
    类(Class)的概念 类是对一组具有相同特征和行为的对象的抽象描述. 理解: [1] 类包含了两个要素:特性和行为 => 同一类事物具有相同的特征和行为. [2] 类是一个群体性概念.例如:网 ...
    
			
    8. 
						
  8. source ~/.bash_profile  只生效一次 解决方案
			
    在~/.zshrc文件最后,增加一行: source ~/.bash_profile
    
			
    9. 
						
  9. 【svn】本地文件夹同步到SVN
			
    本地代码上传至SVN 起因: 我在开发项目代码时往往在本地开发很久,在基本功能完成时才上传svn,添加版本控制. 做法: 右键 TortoiseSVN - Repo browser 在希望项目存储的根 ...
    
			
    10. 
						
  10. https请求之绕过证书安全校验相关配置
			
    需在weblogic服务器上配置内存溢出的地方加入一行配置: -DUseSunHttpHandler=true      注:空格隔开 然后调用工具类:https://www.cnblogs.com/ ...
    
			
    11.