How to have the cutout of a div at the bottom right with shadow to the left


Tags: html,css,css3

Problem :

Fiddle: https://jsfiddle.net/pj489c50/

HTML:

<div class="folded-corner-topright">
    <p>JUST ANOTHER TEXT</p>
</div>

How can I modify my CSS, so

  • The box shadow goes all the way to the end at the top
  • Move the arrow to the bottom and to add a gray arrow left of the blue arrow.


Solution :

This should get you close. As a tip, I would separate your :before and :after selector properties so its more clear which rules are being applied to each.

html{
    height:100%;
}
body{
    height:100%;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:20px;
    background: #FFF;
}
[class^="folded-corner-"]{
    color: #444;
    position:relative;
    width:350px;
    background:#E4E4E4;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
[class^="folded-corner-"],
[class^="folded-corner-"]:before{
    min-height:100px;
    right: 20px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
[class^="folded-corner-"]:before,
[class^="folded-corner-"]:after{
    position:absolute;
    content:"";
    display:block;
    position:absolute;
    bottom:0;
    margin-right: 20px;
    width:0px;
    height:0px;
    box-sizing: border-box;
    border-style:solid;
}
[class^="folded-corner-"] p{
    padding:20px;
    color:#444;
    font-size:12px;
}


.folded-corner-topright:before{
    border-width:0px 0px 20px 20px;
    border-color:transparent transparent #d7d7d7 transparent;
    right: 0px;
}
.folded-corner-topright:after{
    right:-20px;
    border-width:20px 20px 0px 0px;
    border-color:#0099E7 #fff transparent transparent;
    box-shadow:3px 3px 2px 2px #FFF;
}
<div class="folded-corner-topright">
    <p>JUST ANOTHER TEXT</p>
</div>


    CSS Howto..

    How can I keep the hovered menu item open so I can edit it's style with firebug?

    How to change CSS element of data-pid using jquery

    How do I get the (element with the) highest CSS z-index in a document?

    CSS question how to make one div appear over another?

    How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?

    How can I include a CSS stylesheet in an XSL document for Internet Explorer?

    Rails How to include a scss file in a specific erb view? [duplicate]

    How to select a child element in CSS?

    How to find the place where font-size for input is set?

    How to remove curved line in HTML/CSS

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    How to set responsively images on images to appear fixed using HTML+CSS+JS?

    How to hide p1 within div

    How can I format my css text so that the result is in 2 columns?

    How to use CSS' “rotateX()” with jQuery's animate() on multiple elements with delay

    How to style for first class css

    How to change css for each additional innerHTML element in a javascript for loop

    Div inside how to call class in css?

    How to use non-online images in CSS?

    How to make IFrame fill width of screen

    How to use Bootstrap 3 grid if elements are tiled with different height and widths

    JQuery: how to make this variable negative before declaring it as a CSS value?

    How to CSS for today's Internet? [closed]

    How to prevent rightmost inline element from wrapping or overflowing in CSS?

    How to make a css keyframe step animation responsive?

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How to transform (move whole child dives) div to max width with css?

    Can someone tell me how to implement this Javascript? HTML CSS

    How to make a CSS composite scalable

    How can I let div inside bootstrap colum scrollable