使用CSS样式，制作六边形

在制作网上中，经常会遇到绘制其它不规则的图形，如六边形，八边形这类的，在复杂的图形，也是由我们的基本图形组成了，如上面的六边形，就是由两个三角形，一个矩形组成。
先看看，如何绘制三角形，与四边形。     三角形：
<div class="triangle"></div>
.triangle{
width: 0px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
注：将宽与高设置为0，设置边框的宽度，及样式的样式，最后将上，左，右边的边框，设置成透明色，这样我们就可以得到想到的三角形。
如图：

四边形：
与三角形设置类似，不同的是，需要设置div的宽度，我们需要一个小的四边形与一个大的四边形，改变宽度的大小即可：
<div class="fourangle"></div>
<div class="fourangle2"></div>
.fourangle{
  width: 70px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
.fourangle2{
  width: 100px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
效果如图：

完整六边形代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
   #shape{
   margin: 200px 0px 0px 200px;
   position: relative;
   width: 300px;
   height: 500px;
   /*border: 1px solid red;*/
overflow: hidden;
background-image: url("img/bg/bg1.png");
   background-position: center;
   }
   #div1{
   position: absolute;
   top:-150px;
   width: 0px;
   height: 0px;
   border-width: 150px;
border-color:white white transparent;
border-style: solid;

}
   #rect{
   /*border: 1px solid green;*/
   position: absolute;
   top:150px;
   width: 300px;
   height: 200px;

}
   #div2{
   position: absolute;
   top:350px;
   width: 0px;
   height: 0px;
   border-width: 150px;
border-color:transparent white;
border-style: solid;

}
   </style>
</head>
<body>
   <div id="shape">
   <div id="div1"></div>
   <div id="rect"></div>
   <div id="div2"></div>
   </div>
</body>
</html>

转载于:https://www.cnblogs.com/doubolexiang/p/7222423.html

使用CSS样式，制作六边形相关推荐

css样式制作步骤流程进度条
效果图如下 html部分只需要一个ul列表即可(进度条首尾根据自身需求去做修改) css样式部分代码第一步:生成一个长方形效果第二步:根据:after在长方形后面生成一个三角形第三步:修改后面三 ...
（新手制作，高手勿进） CSS样式制作网页心得
一.什么是CSS? CSS指的是层叠样式表(Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作.它可以同时控制多张网 ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
用html做一个横向导航菜单,CSS样式制作的漂亮WEB横向导航菜单
www.wfuyu.com 建站首页 Div+CSS教程 CSS布局实例 CSS2.0教程 CSS酷站欣赏提示:可修改后代码再运行!
简单练手使用css样式制作电子相册
先贴上源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
html5 按钮css样式修改,css样式制作的漂亮按钮
复制代码代码如下: Demo: CSS3 Buttons body { background: #ededed; width: 900px; margin: 30px auto; color: #99 ...
html局部可复制,截取网页局部区域css样式的方法和系统的制作方法
截取网页局部区域css样式的方法和系统的制作方法 [技术领域] [0001]本发明涉及计算机网络技术领域,特别是涉及一种截取网页局部区域CSS样式的方法和系统. [背景技术] [0002]CSS(Ca ...
网页制作 css样式,网页设计与制作-CSS样式.ppt
网页设计与制作-CSS样式第四章CSS样式 4．1 CSS样式的定义和使用 4.1.1什么是CSS CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展 ...
html网页制作.css属性,网页设计中的CSS样式
一.CSS能做什么 CSS用于增强或控制网页样式,并允许将样式信息与网页内容分离.引用样式表的目的是将"网页结构代码"和"网页样式风格代码"分离开,从而使网页设 ...
SEO中的DIV CSS样式的命名规则
在搜索引擎优化中,对于代码的优化是一个非常重要的部分. 如果一个网页的代码非常的简捷,对于提升网站的排名那个是非常有好处的. 同样, 在CSS样式表中,合理有序的命名同样可以为整个CSS工作带来意想不 ...

使用CSS样式，制作六边形

使用CSS样式，制作六边形相关推荐

最新文章

热门文章