CSS 学习笔记之一
Posted on August 11, 2015
by smile921
做一个类似于Mongodb首页的效果
做一个五边形的块状设计,背景色与其他部分明显不同
background: #3b291f;
position: absolute;
top: -510px;
left: -50%;
width: 200%;
height: 1000px;
/* transform: rotate(4.2deg); */
-webkit-transform: rotate(4.2deg);
/* z-index: 1; */
/* transition: all 250ms cubic-bezier(.25,.46,.45,.94); */
/* -webkit-transition: all 250ms cubic-bezier(0.18, 0.89, 0.32, 1.28); */
/* border: 427px; */
/* margin: 30; */
/* border-color: #0DE218; */
/* padding: 2; */
简单思路
设置div块足够大,再利用transform的旋转效果 rotate即可
background: #3b291f; 背景设置
position: absolute;
top: -510px;向上移动
left: -50%;向左移动
width: 200%;设置宽
height: 1000px;设置高
/* transform: rotate(4.2deg); */ 设置旋转角度
-webkit-transform: rotate(4.2deg);设置旋转角度