用css绘制六边形的div

用css绘制六边形的div

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>纯css绘制六边形-jq22.com</title>

</head>

<body>

<div id="sharpContainer">

<div class="sharp center">

</div>

<div class="sharp top">

</div>

<div class="sharp top-left">

</div>

<div class="sharp top-right">

</div>

<div class="sharp bottom">

</div>

<div class="sharp bottom-left">

</div>

<div class="sharp bottom-right">

</div>

</div>

<script>

</script>

</body>

</html>

.sharp:before {

content:"";/*不需要展现文字等内容,所以设置为空字符 */

width:0px;

border-bottom:80px solid transparent;

border-top:80px solid transparent;

border-right:40px solid orangered;

position:absolute;

left:-40px;

top:0px;

}

.sharp {

min-width:100px;

height:160px;

background:orangered;

display:inline-block;

position:absolute;

line-height:160px;

color:#FFFFFF;

font-size:20px;

text-align:center;

}

.sharp:after {

content:"";/*不需要展现文字等内容,所以设置为空字符*/

width:0px;

border-bottom:80px solid transparent;

border-top:80px solid transparent;

border-left-width:40px;

border-left-style:solid;

border-left-color:orangered;

position:absolute;

right:-40px;

top:0px;

}

#sharpContainer {

width:100%;

height:600px;

}

#sharpContainer .center {

top:200px;

left:300px;

}

#sharpContainer .top {

top:20px;

left:300px;

}

#sharpContainer .top-left {

top:110px;

left:140px;

}

#sharpContainer .top-right {

top:110px;

left:460px;

}

#sharpContainer .bottom {

top:380px;

left:300px;

}

#sharpContainer .bottom-left {

top:290px;

left:140px;

}

#sharpContainer .bottom-right {

top:290px;

left:460px;

}

作者:小屋
链接:http://www.rumenwu.com/operate/1154.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(2)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2018-12-20 09:52
下一篇 2019-01-12 11:12

相关推荐

  • 别让你的付费社群,变成普通微信群

    知识付费时代,不少人愿意用钱来快速的获取知识,于是出现了许多的付费社群。然而随之也衍生了不少割韭菜的现象,大家纷纷感慨:怎么进了付费群还是学不到东西呢?你有没有遇到这种困扰?来看看本文作者的分析吧。 今天来和各位聊聊,为什么你加入了社群总有一种后悔甚至是割韭菜的感觉。 一、纯粹割韭菜社群 其实付费社群本身就是一个产品,而产品就有高中低不同的档次之分,也有正品…

    2021-02-20
    7290
  • 被过度夸大的私域流量

    一边有李佳琦、薇娅的带货奇迹,一边也有王祖蓝、李湘、叶璇等明星的带货滑铁卢。 一边有董明珠一晚 6 大平台连动销售 65.4 亿,也有御泥坊全年 8000 多场直播平均每场收入不过 1.2 万元。 一边有商家纷纷重金上线各种小程序构建私域流量池,一边也有宜家逆潮流入驻天猫吃公域流量的红利。 私域流量,并不是看上去那么美。从去年开始升温的这一概念,在今年初然突…

    2020-06-06
    1.8K0
  • 详解JavaScript轮播图技术理解

    众所周知,轮播图现今在网页中占据着必不可少的地位。任何的一个网站,一个网页,都会出现一个轮播图,而轮播图更是利用JavaScript做出的一个比较基础的动画。下面是我本人对写轮播图的一点见解,很多地方可能不是很全面,甚至可能说是错误的,希望大家多多指点。 下面这个是我自己闲暇时随便做的一个轮播图: 我觉得轮播图中最主要的是要理解到图片为什么会滑动,是怎么控制…

    2018-04-02
    2.6K0
  • 便利店改变了什么?

    去标签化的便利店,早就成为了新的风口。

    2017-04-17
    2.9K0
  • 纯Css文字上下滚动轮播

    代码描述:纯Css文字上下滚动轮播  

    2018-04-27
    6.3K0
  • 大众要投资建设覆盖全美的充电站网络,特斯拉也没闲着

    这是传统车企与新兴车企在充电设施上的对决。

    2017-04-17
    3.5K3