css+div实现金字塔方块布局效果代码

代码语言:html

所属分类:布局界面

代码描述:css+div实现金字塔方块布局效果代码

代码标签: css div 金字塔 方块 布局

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
.slots-container {
	background: tomato;
	display: flex;
	flex-flow: row wrap;
	align-content: space-between;
	justify-content: center;
	padding: 10px;
}

.slot {
	display: contents;
	
	> div {
		width: 100px;
		background: gold;
		height: 100px;
		font-size: 30px;
		line-height: 100px;
		text-align: center;
		margin: 10px;
	}
	
	&:nth-child(1),
	&:nth-child(3){
		
		&:after {
			width: 100%;
  			content: '';
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0