不为有趣之事,何以遣无涯之生

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);设置旋转角度

star these blogs which I think is quite Excellent