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 ...
随机推荐
- GIMP类似于PhotoShop的开源免费软件
首先我们先看看他的界面如何,都有哪些功能!而且它支持多种平台,可以在MacOS.Windows.Linux操作系统上使用.非常值得推荐! 1.官方地址下载地址: https://www.gimp. ...
- CentOS下安装SVN服务端
---恢复内容开始--- 1.使用yum安装 yum install subversion 2.创建仓库 1.创建成功后在svn下面多了几个文件夹. cd /home mkdir svn svnadm ...
- 洛谷P1164 小A点菜 && caioj 1410 动态规划1:点菜(背包方案问题)
方程很简单 f[0] = 1 f[j] += f[j-w[i]] #include<cstdio> #define REP(i, a, b) for(int i = (a); i < ...
- 【Henu ACM Round#19 D】 Points on Line
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑l..r这个区间. 且r是满足a[r]-a[l]<=d的最大的r 如果是第一个找到的区间,则直接累加C(r-l+1,3); ...
- DATA_PUMP_DIR impdp 指定导出目录
1.mkdir /tdms1/oracle/dump 2.sqlplus / as sysdba 3.create directory udir as '/tdms1/oracle/dump'; 4. ...
- Spring MVC数据转换
样例:把一个字符串封装而一个对象. 如:username:password格式的数据ZhangSan:1234.我们把这个数据封装成一个User对象.以下分别使用属性编辑器与转换器来实现. 1.自己定 ...
- POJ - 3415 Common Substrings(后缀数组求长度不小于 k 的公共子串的个数+单调栈优化)
Description A substring of a string T is defined as: T( i, k)= TiTi+1... Ti+k-1, 1≤ i≤ i+k-1≤| T|. G ...
- sass01
Chrome --流行的浏览器,及前端开发调试工具 WebStorm --强大的跨平台前端集成开发环境 Sublime Text --神器级别的代码编辑器,如vim般强大,而上手难度极低. ----- ...
- .Net 安装aliyun-oss
NuGet安装 如果您的Visual Studio没有安装NuGet,请先安装 NuGet. 安装好NuGet后,先在Visual Studio中新建或者打开已有的项目,然后选择工具 > NuG ...
- zzulioj--1089--make pair(dfs+模拟)
1809: make pair Time Limit: 1 Sec Memory Limit: 128 MB Submit: 60 Solved: 44 SubmitStatusWeb Board ...