我怎么能做斜的div

时间:2018-01-21 12:47:50

标签: html css

我需要制作由两个div组成的div(一个白色的黑色看图片)但是我无法做到。

enter image description here

1 个答案:

答案 0 :(得分:0)

HTML

<div></div>

CSS

div{
    height:100%;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    top:0; right:0;
    width:100%; height:100%;
    background-color: rgba(90, 74, 199, .8);
    border-right:40px solid rgba(173, 96, 223, .8);

    -webkit-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    transform-origin:100% 100%;

    -webkit-transform:skewX(30deg);
    -ms-transform:skewX(30deg);
    transform:skewX(25deg);
}


/******  FOR THE DEMO  *******/

html, body{
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);
    background-size:cover;
    margin:0;padding:0;
    height:100%;
}