css3.0+html绘制六边形
<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绘制六边形的更多相关文章
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- css绘制六边形
CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: <div id="box1">< ...
- css3之图形绘制
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...
- 使用css绘制六边形
用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: 接下来,就是代码了: CSS: ;;border-top: 30px solid #6c6;border-left: ...
- win7中VS2010中安装CSS3.0问题解决方法
win7中VS2010中安装CSS3.0问题解决方法 在安装Standards Update for VS2010 SP1后,VS2010中没有CSS3.0问题,以下是我的解决方法 1.首先去官网 ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- css3.0
css3.0相比css2.0多了些我们经常需要使用的标签属性,例如:圆角,个别圆角,不透明度,阴影特效等 1.圆角(即如何画圆)border-radius a{width:20px; height:2 ...
- 海盗船长小米首页小船来回摆动CSS3.0效果
海盗船长小米首页小船来回摆动CSS3.0效果,偶然之间看到的,就写了一个. <!DOCTYPE html> <html lang="en"> <hea ...
随机推荐
- BAPC 2014 Preliminary(第一场)
D:Lift Problems On the ground floor (floor zero) of a large university building a number of students ...
- 51Nod 最长的循环节(打表预处理)
正整数k的倒数1/k,写为10进制的小数如果为无限循环小数,则存在一个循环节,求<=n的数中,倒数循环节长度最长的那个数,假如存在多个最优的答案,输出所有答案中最大的那个数. 1/6= ...
- YOLOv3学习笔记
Darknet/Yolo官网:https://pjreddie.com/darknet/yolo/ GitHub程序:https://github.com/AlexeyAB/darknet 关于程序程 ...
- python 异步IO
参考链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143208573 ...
- C语言调试小技巧
经常看到有人介绍一些IDE或者像gdb这样的调试器的很高级的调试功能,也听人说过有些牛人做工程的时候就用printf来调试,不用特殊的调试器.特别是在代码经过编译器一些比较复杂的优化后,会变得“难以辨 ...
- 洛谷 P1056 排座椅
P1056 排座椅 题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只有有限的D对同学上 ...
- ArcGIS api for javascript——显示地图属性
描述 本例展示了如哦读取地图和图层的属性和返回信息给用户.本例中的四个按钮允许用户接收地图属性.每个按钮调用不同的函数. ·Get All Map Layers - 这个按钮调用getMapLayer ...
- 保存数据同一时候查询保存数据记录的ID
保存数据时同一时候取出该数据的记录ID insert into Table(a,b) values(1,2) select @@identity
- hdu 3547 DIY Cube (Ploya定理)
DIY Cube Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total S ...
- 异步FIFO及verilog原码
这几天看了Clifford E. Cummings的两篇大作<Simulation and Synthesis Techniques for Asynchronous FIFO Design&g ...