Photoshop Question posted in
The official user guide can be found here.

css: cut corner of box – Photoshop

So I have created a box in css like this: 

#box
{
background-color: #5d5d5d;
border-radius: 2px 2px 2px 2px;
box-shadow: 5px 5px 2px #767676;
height: 200px;
width: 1100px;
}

with the result of
current box

What I want to do without overlaying a smaller whitebox, and without messing up the shadow effect is something like this:
enter image description here

Is this possible, or am I going to have to just add a smaller whitebox over the top and play with the layering and shadow effects until they’re about right?

Or maybe there is a way using JavaScript or something like that?

NB: What I don’t want to do is just create the box in photoshop as this will slow overall load time of the page

Tags:

4

Answers


  1. 0

    You can create an ::after pseudo-element with a white background, float it right and offset it to move over the shadow:

    #box::after{
    content:'';
    width:500px;
    height:100px;
    position:relative;
    float:right;
    top:0px;
    right:-7px;
    background-color:#fff;
}
    Login or Signup to reply.
  2. 0

    option:1 boxshadow

    body{padding:40px}

#box
{
background-color: white;
border-radius: 2px 2px 2px 2px;
box-shadow: 14px -88px 0px white,5px 5px 2px #767676,inset 199px -88px 0 #5d5d5d;
height: 200px;
width: 510px;
}
    <div id=box />

    option:2 pseudo element see @Fahad Hasan

    Login or Signup to reply.
  3. 0

    You can use the :before pseudo-element to achieve what you’re trying to do like this: DEMO. This is the CSS which I’ve added:

    div#box:before {
    content:'';
    background: white;
    width: 700px;
    display: block;
    height: 100px;
    float: right;
}
    Login or Signup to reply.
  4. 0

    You should try with pseudo elements, this is an example:

    HTML:

    <div id="mydiv"></div>

    CSS:

    div#mydiv{
 width:300px;
 height:300px;
 background-color:red;
}
div#mydiv::after {
 content: ' ';
 display: block;
 background-color: blue;
 width: 270px;
 height: 100px;
 float: right;
}

    Here is a demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search