小松老师demo效果图
image.png
image.png
基本实现
<html>
<head>
<meta charset="UTF-8"/>
<title>practice</title>
<style type="text/css">
.item{
margin: 200px auto;
height: 200px;
width: 346.4px;
background-color: #f00;
position: relative;
}
.item::before {
content: "";
display: inline-block;
border-top: 100px solid transparent;
border-left: 173px solid transparent;
border-right: 173px solid transparent;
border-bottom: 100px solid #FF0000;
position: absolute;
left: 0;
top: -100%;
}
.item::after {
content: "";
display: inline-block;
border-top: 100px solid #FF0000;
border-left: 173px solid transparent;
border-right: 173px solid transparent;
border-bottom: 100px solid transparent;
position: absolute;
left: 0;
bottom: -100%;
}
</style>
</head>
<body>
<div class="item">
</div>
<script type="text/javascript">
</script>
</body>
</html>
image.png
其实我很好奇, 小松老师是怎么在六边形上,弄上图片的?
百度了一下
用CSS3如何把如图中的红色三角形的背景图做成一体
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background-color: #444;
}
.test {
width: 15px;
height: 30px;
box-sizing: border-box;
border-top: 15px solid #f5f5f5;
border-bottom: 15px solid #f5f5f5;
/*border-left: 20px solid #0f0;*/
border-right: 15px solid transparent;
/* border-top-right-radius: 4px;
border-radius: 12px;*/
}
.csspic {
width: 200px;
height: 400px;
margin: 50px auto;
background: url(img/1.jpg) -15px top no-repeat;
-webkit-background-size: cover;
background-size: cover;
border-radius: 10px;
position: relative;
border: 15px solid #f5f5f5;
-moz-background-clip: border;
-webkit-background-clip: border-box;
-o-background-clip: border-box;
background-clip: border-box;
}
.img {
overflow: hidden;
width: 260px;
height: 400px;
}
.sjx {
position: absolute;
top: 30px;
left: -15px;
background: url(img/1.jpg) left -30px no-repeat;
-webkit-background-size: 500px;
background-size: 500px;
z-index: 9999;
}
.csspic img {
height: 100%;
}
</style>
</head>
<body>
<div class="csspic">
<div class="sjx">
<div class="test"></div>
</div>
<div class="img">
<!-- <img src="images/5.jpg"> --></div>
</div>
</body>
</html>
效果
image.png
核心问题是这个, 怎么让一个三角形,有背景图片?
答案是,父元素提供图片
子元素,三个border 有颜色, 一个border 透明即可.
html
<div class="item">
<div class="box"></div>
</div>
<script type="text/javascript">
css
.item{
background-image: url(img/1.jpg);
}
.item .box {
border-top: 100px solid white;
border-right: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
}
image.png
不过不好控制.
勉强做了出来
<html>
<head>
<meta charset="UTF-8"/>
<title>practice</title>
<style type="text/css">
.wrapper{
width: 346.4px;
height: 200px;
position: relative;
}
.item{
margin: 200px auto;
height: 200px;
width: 346.4px;
background-color: red;
position: relative;
background-image: url(img/1.jpg);
background-position: 0 -100px;
}
.top {
width: 346.4px;
height: 100px;
background-image: url(img/1.jpg);
background-position: 0 0;
position: absolute;
left: 0;
top: -50%;
}
.top .up{
border-left: 173px solid white;
border-right: 173px solid white;
border-bottom: 100px solid transparent;
}
.bottom {
width: 346.4px;
height: 100px;
background-image: url(img/1.jpg);
background-position: 0 -300px;
position: absolute;
left: 0;
bottom: -50%;
}
.bottom .down{
border-top: 100px solid transparent;
border-left: 173px solid white;
border-right: 173px solid white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="up"></div>
</div>
<div class="item"></div>
<div class="bottom">
<div class="down"></div>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
效果图
image.png
封装一下
<script type="text/javascript">
// 现在我希望, 给出一个指定的宽度, 以及一个图片url
// 给我返回一个六边形的图片 的 dom 元素
function liubianxing (width,url,position) {
var domArr = ['wrapper','top','up','item','bottom','down'];
var domObj = {};
domArr.forEach(function (item) {
// 创建 元素, 并存在 domObj里
domObj[item] = document.createElement('div');
// 实际上, 就本文而言,不需要添加类名了.
// domObj[item].className = item;
})
function appendChild (father,son) {
domObj[father].appendChild(domObj[son])
}
// 此处可以考虑用curry?
var wrapperAppend = appendChild.bind(null,'wrapper');
// 顺序还是比较重要的
// 弄出结构
wrapperAppend('top');
wrapperAppend('item');
wrapperAppend('bottom');
appendChild('top','up');
appendChild('bottom','down');
// 用得到的基本值
var width = width; 200
var widthX = width * Math.sqrt(3); 346.4
var height = width/2; 100
var url = url;
var x = position && position.x || 0;
var y = position && position.y || 0;
// 把 css 文本拿过来, 换一下 变量
// 此处的css顺序, 与 domArr的顺序必须严格一致.
var cssArr = [
`width: ${widthX}px;
height: ${width}px;
position: relative;`,
`width: ${widthX}px;
height: ${height}px;
background-image: url(${url});
background-position: ${x}px ${y}px;
position: absolute;
left: 0;
top: -50%;`,
`border-left: ${widthX/2}px solid white;
border-right: ${widthX/2}px solid white;
border-bottom: ${height}px solid transparent;`,
`
height: ${width}px;
width: ${widthX}px;
background-color: red;
position: relative;
background-image: url(${url});
background-position: ${x}px ${-height+y}px;`,
`width: ${widthX}px;
height: ${height}px;
background-image: url(${url});
background-position: ${x}px ${-height-width+y}px;
position: absolute;
left: 0;
bottom: -50%;`,
`border-top: ${height}px solid transparent;
border-left: ${widthX/2}px solid white;
border-right: ${widthX/2}px solid white;`
]
// 为元素添加样式
function addCss (div,css) {
div.setAttribute('style',css);
}
domArr.forEach(function (item,index) {
var cssStr = cssArr[index].replace(/\s/gm,' ');// 这里不能把 所有空格都去掉, 会让部分css失效
addCss(domObj[item],cssStr);
})
return domObj.wrapper
}
// 测试
var url = 'img/1.jpg';
var div = liubianxing (200,url,{x:-80,y:-50})
document.body.appendChild(div);
// 居中一下, 好截图
div.style.margin = "200px auto";
效果
image.png
但我依然想不明白, 小松老师的demo效果怎么做出来的.
因为按照这种方式显示图片, 两个六边形之间无法像 小松老师那样的紧紧排着.
会产生覆盖的啊.
