html如何将图片做成六边形,CSS实现图片背景填充的六边形的示例代码

六边形的实现原理其实就是通过旋转三个重叠的矩形得到的，如下图所示：

这里为了得到一个正的六边形，两个矩形旋转的角度必须为-60deg和60deg，以及矩形高宽比必须是Math.sqrt(3) : 1

那么首先我们要创建三个矩形：

我们设定三个矩形的宽高分别为60px和104px，背景色为蓝色，.hexagon__item_left旋转-60deg，.hexagon__item_right旋转60deg，.hexagon__item_center不旋转。

.hexagon {

width: 60px;

height: 104px;

position: relative;

margin: 200px auto;

}

.hexagon__item {

width: 100%;

height: 100%;

background: blue;

position: absolute;

top: 0;

left: 0;

}

.hexagon__item_left {

transform: rotate(-60deg);

}

.hexagon__item_right {

transform: rotate(60deg);

}

这样就简单的得到了一个正六边形。

那么我们要如何才能使得蓝色背景变成图片呢，其实也很简单，上述的三个矩形其实只是起到了一个塑形的作用，实际上是应该设置为 visibility: hidden 的，我们需要给三个矩形分别添加一个矩形的子元素并且设置为 visibility: visible 。

三个子元素的宽高需要正好能覆盖之前的蓝色六边形。

做好代码如下，大家可以好好研究一下

Document

.hexagon {

width: 60px;

height: 104px;

position: relative;

margin: 200px auto;

}

.hexagon__item {

width: 100%;

height: 100%;

background: blue;

position: absolute;

top: 0;

left: 0;

visibility: hidden;

overflow: hidden;

}

.hexagon__item_left {

transform: rotate(-60deg);

}

.hexagon__item_right {

transform: rotate(60deg);

}

.hexagon__item:before {

position: absolute;

top: 0;

left: 0;

content: "";

height: 100%;

width: 120px;

visibility: visible;

background: url('https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=13897784,1115290966&fm=58') no-repeat;

background-size: cover;

transform-origin: 0 0;

}

.hexagon__item_left:before {

transform: rotate(60deg) translateY(-50%);

}

.hexagon__item_right:before {

transform: rotate(-60deg) translateX(-75%);

}

.hexagon__item_center:before {

transform: translateX(-25%);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html如何将图片做成六边形,CSS实现图片背景填充的六边形的示例代码相关推荐

html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果代码模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
html制作收货地址页面,css 收货地址平行四边形的线条样式示例代码
代码如下所示: // 收货地址的平行四边形的线条样式 //样式 .top{ background-color: #fff; position: relative; } .top:before{ pos ...
html做一页关于时间轴的网站,前端css实现最基本的时间轴的示例代码
本文介绍了前端css实现最基本的时间轴的示例代码,分享给大家,具体如下: 原型: 代码: 状态详情 #timeleft div { height: 65px; color: #333333; } #t ...
html input选中样式,CSS 伪类修改input选中样式的示例代码
注:该表引自W3School教程伪元素的分类及作用: 下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示: 主要是用到了after伪类和字体符号. input{ -webki ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
html悬浮的图片居中,HTML/CSS：图片居中(水平居中和垂直居中)
css图片水平居中 1.利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 2.利用文本的水平 ...
css图片过大,CSS解决图片过大撑破DIV的方法
一.防止图片撑破DIV方法一原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切.等比例缩 ...

html如何将图片做成六边形,CSS实现图片背景填充的六边形的示例代码

html如何将图片做成六边形,CSS实现图片背景填充的六边形的示例代码相关推荐

最新文章

热门文章