Rushabh Shah Rushabh Shah - 13 days ago 5
CSS Question

CSS change element Height and Width

I have CSS envelope as a Element. I want to Increase 50 px height and width of Element. I changed CSS property but it not working. now How can I increase Element Height and Width? I am weak in English Please Apologize me if I made any Grammatical or Spelling mistakes.



#envelope {
background: #F66B40;
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -150px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
}

#lid {
position: relative;
top: -150px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 150px 150px 150px;
border-color: transparent transparent #F66B40 transparent;

}

#letter {
position: relative;
background: #f6f6f6;
padding-top:5px;
padding-left: :5px;
padding-right:5px;
top: -150px;
width: 280px;
height: 200px;
left: 10px;
top: -220px;
animation: out 5s infinite linear;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

<div id="envelope">
<div id="lid"></div>
<div id="letter"></div>
<div id="left-corner"></div>
<div id="right-corner"></div>
</div>





JSFIDDLE:

https://jsfiddle.net/0L37kehb

aje aje
Answer

updated CSS

    #envelope {
      background: #F66B40;
       width: 350px;
       height: 250px;
       position: absolute;
       left: 50%;
       top: 40%; 
       margin-left: -150px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
    }

    #lid {
      position: relative;
      top: -150px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 0 175px 150px 175px;
      border-color: transparent transparent #F66B40 transparent;

    }

    #letter {
      position: relative;
      background: #f6f6f6;
      padding-top:5px;
      padding-left: :5px;
      padding-right:5px;
      top: -150px;
      width: 330px;
      height: 250px;
      left: 10px;
      top: -220px;
      animation: out 5s infinite linear;
      box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    }

    #left-corner {
      position: relative;
      top: -315px;
      left: 10px;
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 150px 0 0 300px;
      border-color: transparent transparent transparent #F66B40;

    }

    #right-corner {
      position: relative;
      top: -470px;
      left: 50px;
      width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 150px 300px;
    border-color: transparent transparent #F66B40 transparent;
    }

    @keyframes out {
      0% {top: -220px;}
      25% {top: -200px;}
      50% {top: -220px;}
      75% {top: -200px;}
    }