div+css画六边形

效果图：

div:

<div class="iconBox"><div class="Icon"><div class="IconF"><div class="IconS"><div class="IconT" style="background-color: #E8A316;"><a id="daiban" onclick="skipCase(3);" class="IconUrl">5</a></div></div></div><a onclick="skipCase(3);" class="IconCon">待办工单</a></div><div class="Icon"><div class="IconF"><div class="IconS"><div class="IconT" style="background-color: #11ED94;"><a id="paifa" onclick="skipCase(4);" class="IconUrl">8</a></div></div></div><a onclick="skipCase(4);" class="IconCon">我的派发</a></div><div class="Icon"><div class="IconF"><div class="IconS"><div class="IconT" style="background-color: #22A0DC;"><a id="shangbao" onclick="skipCase(1);" class="IconUrl">9</a></div></div></div><a onclick="skipCase(1);" class="IconCon">我的上报</a></div><div class="Icon"><div class="IconF"><div class="IconS"><div class="IconT" style="background-color: #A0A0A0;"><a id="lishi" onclick="skipCase(2);" class="IconUrl">10</a></div></div></div><a onclick="skipCase(2);" class="IconCon">历史工单</a></div>
</div>

css:

        .iconBox{width: 80%;margin: 0 auto;}.iconBox .Icon{float: left;width: 50%;}.iconBox .Icon .IconCon{display: block;height: 20px;width: 100%;text-align: center;line-height: 20px;color: #1385EB;cursor: pointer;}.IconF,.IconS,.IconT{width: 100px;height: 150px;overflow: hidden;margin: 0 auto;}.iconBox .IconF{            transform: rotate(120deg);-ms-transform: rotate(120deg);-moz-transform: rotate(120deg);-webkit-transform: rotate(120deg);}.iconBox .IconS{transform: rotate(-60deg);-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);}.iconBox .IconT{transform: rotate(-60deg);-ms-transform: rotate(-60deg);-moz-transform: rotate(-60deg);-webkit-transform: rotate(-60deg);background-color: rgba(0,0,0,0.6);}.iconBox .IconT .IconUrl{display: block;width: 100px;height: 150px;line-height: 150px;text-align: center;font-size: 30px;color: white;}

div+css画六边形相关推荐

html css画五角星,css画梯形，css画五角星， css画六角星，css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. 1.HTML部分:(全是DIV)  <div class="pig_container& ...
div+css画漏斗图
需求:系统需要画一个漏斗图,需要对漏斗进行各行操作并且每行留出空格,通过某些操作需要进行部分漏斗的隐藏.需求比较复杂,虽然echarts提供的漏斗图很方便,但是操作起来比较困难,所以选用div+css ...
css html弄出哆啦a梦,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! body{ background-color: #66B3FF; height: 300px; ov ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
实现css六边形边框,css 这种六边形的边框怎么画？
用一个div+css怎么实现? 还这种可以填充颜色的求代码! <html> <head> <style> .sixedge{ height: 24px; widt ...
html中怎么写正六边形,用css画正六边形的方法
用css画正六边形的方法发布时间:2020-09-14 14:56:11 来源:亿速云阅读:80 作者:小新小编给大家分享一下用css画正六边形的方法,希望大家阅读完这篇文章后大所收获,下面让我 ...
html如何将图片做成六边形,css画正六边形的两种方法
说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...
html中怎么写正六边形,如何用css画正六边形？用css画正六边形的两种方法（代码实例）...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
一个div压在另一个div上面_【CSS小分享】用CSS画一个新拟态风格键盘
什么是新拟态新拟态的英文名称是"Neumorphism",也有人称为"Soft UI". 简单讲,新拟态是一种图形样式,其原理是通过模拟真实物体来为界面的UI ...

div+css画六边形

div+css画六边形相关推荐

最新文章

热门文章