Envellope design using CSS

by Kheema Pandey

HTML

<div>Envellope</div>

CSS

div {
  width:500px;
  height:194px;
  margin:1em auto;
  box-shadow:0 0 5px #363E55;
  border:1px solid #456;
  border-radius:3px;
  background:#2F374B;
  position:relative;
  text-align:center;
  color:white;
  font-family:courier;
  font-size:1.5em;
  text-shadow:-1px -1px 1px  #123,
    1px 1px 1px gray;
  line-height:2em;
  overflow:hidden;
}
div:before,
div:after {
  content:'';
  position:absolute;
  width:57.5%;
  height:1px;
  background:#456;
  box-shadow:0 0 3px 2px #363E55,
    340px -82px  4px 1px  #363E55,
    0 3px  5px black;
  ;

  top:2px;
  left:2px;
  transform:rotate(30deg);
  transform-origin:top left;
}
div:after {
  transform:rotate(-30deg);
  transform-origin:top right;
  left:auto;
  right:2px;
  background:#456;
  box-shadow:0 0 3px 2px #363E55,
    -340px -82px  4px 1px  #363E55,
    0 3px  5px black;
}