Clever Geek Handbook

<div> with slanted edge and drop shadow

How do I create the following layout in HTML and CSS?

<div> with sloped edge

I tried adding a selection <div>

to create a slanted edge using with transform: rotate();

no luck.

Basically, I want to achieve:

  • Two elements <div>

    with content
  • Two elements <div>

    have slanted edges and shadows
+3


source to share


3 answers


The transform skew

can create skew, but unfortunately this applies to the entire div, not just one edge of it. You can use overlapping or nested divs to blend straight and skewed edges in the same box, but this confuses shadows a bit (see http://jsfiddle.net/z9am39sp/ ).

Another weakness is that with this particular setting, you cannot fit the text to the skewed shape.



However, it may be close enough for your purposes. Your call.

+4


source


I gave him a chance and here is my working violin .

I used CSS3 transform: skew on pseudo element.

Html

<div class="container">
    <div class="slope">content 2</div>
    <div class="slope">content 1
        <br/>text</div>
    <div class="slope">content 3
        <br/>text
        <br/>text</div>
</div>


CSS

*, *:before, *:after {
    box-sizing: border-box;
}
body {
    background: #ddd;
}
.container {
    /*border: 1px solid red;*/
    padding: 0 3px 0 0;
    overflow: hidden;
}
.slope {
    width: 100%;
    padding: 5px;
    margin: 0 0 40px;
    position: relative;
    background: #fff;
}
.slope:before {
    content:"";
    width: 100%;
    height: calc(100% + 26px);
    position: absolute;
    top: -13px;
    left: 0px;
    z-index: -1;
    background: #fff;
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.4);
    transform: skew(0deg, 2deg);
}
.slope:last-of-type {
    margin-bottom: 5px;
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.4);
}
.slope:last-of-type:before {
    margin-bottom: 0px;
    height: calc(0% + 26px);
    box-shadow: none;
}

Notes:

  • You may have to play with transform: skew(Ndeg)

    and height: calc(100% + Npx)

    depending on the size of the divs
  • You may also need vendor prefixes
  • Not sure about responsiveness, but according to my tests it works well.
+2


source


You can use selectors :before

and :after

. You can learn more about them here

Also here's a fiddle

Feel free to leave a comment if you have any other questions.

Html

<div class="div-1"> </div>
<div class="div-2"> </div>

CSS

body{
    background:#ccc;
}
.div-1{
    width:100px;
    height:150px;
    position:relative;
    background:#fff;
}
.div-1:before{
    content:"";
    position:absolute;
    border:20px solid transparent;
    border-right:100px solid #fff;
    border-top:0px;
    bottom:-20px;
    left:-20px;
}

.div-2{
    width:100px;
    height:50px;
    position:relative;
    background:#fff;
    margin-top:30px;
}
.div-2:before{
    content:"";
    position:absolute;
    border:20px solid transparent;
    border-left:100px solid #fff;
    border-bottom:0px;
    top:-20px;
    right:-20px;    
}
+1


source






More articles:


All Articles