<section class="ass_desc">
<section class="ass_descLeft posRe">
<aside class="ass_descLeItem backW posAb"></aside>
<aside class="ass_descLeItem backW posAb"></aside>
<aside class="ass_descLeItem backW posAb"></aside>
</section>
</section>
.backW{background: #fff;}
.posRe{position: relative;}.posAb{position: absolute;}
.ass_desc{width: 97%;height: 8.1rem;margin: 0 auto;}
.ass_descLeft{width: 32.25%;height: 80%;padding-top: 1.2rem;}
.ass_descLeItem{width: 3.46rem;height: 5.923rem;margin-left: 24%;}
.ass_descLeItem:nth-of-type(2){transform: rotate(60deg);-ms-transform: rotate(60deg);-moz-transform: rotate(60deg);-webkit-transform: rotate(60deg);}
.ass_descLeItem:nth-of-type(3){transform: rotate(120deg);-ms-transform: rotate(120deg);-moz-transform: rotate(120deg);-webkit-transform: rotate(120deg);}

css3.0+html绘制六边形的更多相关文章

  1. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  2. css绘制六边形

    CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: <div id="box1">< ...

  3. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  4. 使用css绘制六边形

    用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: 接下来,就是代码了: CSS: ;;border-top: 30px solid #6c6;border-left:  ...

  5. win7中VS2010中安装CSS3.0问题解决方法

    win7中VS2010中安装CSS3.0问题解决方法   在安装Standards Update for VS2010 SP1后,VS2010中没有CSS3.0问题,以下是我的解决方法 1.首先去官网 ...

  6. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  7. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  8. css3.0

    css3.0相比css2.0多了些我们经常需要使用的标签属性,例如:圆角,个别圆角,不透明度,阴影特效等 1.圆角(即如何画圆)border-radius a{width:20px; height:2 ...

  9. 海盗船长小米首页小船来回摆动CSS3.0效果

    海盗船长小米首页小船来回摆动CSS3.0效果,偶然之间看到的,就写了一个. <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. python实例

    先来一段代码: #这段代码可牛逼了,1.可以根据indent的选项调整模式.2.根据level调整级别. #代码很low,主要看思想..哈哈哈..看看从最初的样子到最好经历了什么.. 开始: #!/u ...

  2. ip代理池的爬虫编写、验证和维护

    打算法比赛有点累,比赛之余写点小项目来提升一下工程能力.顺便陶冶一下情操 本来是想买一个服务器写个博客或者是弄个什么FQ的东西 最后刷知乎看到有一个很有意思的项目,就是维护一个「高可用低延迟的高匿IP ...

  3. CodeForcesEducationalRound40-D Fight Against Traffic 最短路

    题目链接:http://codeforces.com/contest/954/problem/D 题意 给出n个顶点,m条边,一个起点编号s,一个终点编号t 现准备在这n个顶点中多加一条边,使得st之 ...

  4. Entity Framework的一个实例

    环境:Visual studio2013+sql server本地数据库 创建一个C#应用程序,首先在nuget中添加Entity Framework 接下来的工作分为四个主要部分: 第一部分:App ...

  5. qduoj~前端~二次开发

    青岛大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上部署运行,其实整体运行还是建立在docker的容器虚拟环境里,这里暂时不需要docker.安装环境是Ubun ...

  6. element-ui table 行内编辑

    EditRow.ts vue+element-ui+slot-scope原生实现可编辑表格 interface NoParamConstructor<T> { new(): T; } ex ...

  7. IDEA使用GIT 上传到GitHub

    1.下载Git https://www.git-scm.com/download/ 2.安装 3.IDEA配置Git(设置Git路径,点击Test),如下代表成功 4.创建仓库 5.add 6.pus ...

  8. WIN10远程桌面连接--“出现身份验证错误。要求的函数不支持”

    最近WIN10升级补丁后发现远程桌面无法连接了,报“出现身份验证错误.要求的函数不支持”的错误: 解决办法: 第一种,配置本地自己的电脑,开始菜单->搜索gpedit.msc并打开   打开配置 ...

  9. windows常用命令有哪些(整理)

    windows常用命令有哪些(整理) 一.总结 一句话总结:其实这个好学,只要先弄懂主干,清除主干,那么枝叶的添加逻辑就很清除了 这种多内容的,散乱的,弄清除主干效率就高了 1.windows命令行的 ...

  10. Android 使用Retrofit获取JSON数据

    在大家使用网络请求的时候,往往会出现一种情况:需要拿到服务器返回来的JSON字符串,而Retrofit会默认将Json解析,而又没有直接暴露出拿到Json字符串的方法: 今天测接口的时候,发现当数据正 ...