CSS3 Demo: tucked corners

tucked Corners

Hiding angles is in itself nothing new. It has long been used in the print design and also on websites. However, to achieve this effect, one had to make use of pictures, or in the case of a web page: extra javascript code. But now it is also possible to achieve the 'tucked corner' effect through CSS3. Images are no longer required. It is thus also easier to maintain and/or modify the effect , or deploy it dynamically.

Example 1: tucked corners with white 'paper' and colored background

Check this example in your browser

The HTML


<div class="container">
        <div class="letter hiddenCorner">
           <h2>Tucked corners with CSS3</h2>
           <img src="images/icon_tucked_corners.png" width="100" height="100" />
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, 
           consequat eget, tristique nec, auctor quis, purus. </p>
            <div class="hiddenCornerDown"></div>
        </div>
    <div style="height:100px"></div>
</div>

The CSS

.container{
  width: 80%;
  height:300px;
  background-color: #eeeeee; 
  padding:10%;
}
.hiddenCorner:after {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-color: #F5F5F5 #F5F5F5 rgba(255, 255, 255, 0.3);
  left: -35px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hiddenCorner:after,.hiddenCorner:before {
  background: none repeat scroll 0 0 #eeeeee;
  -webkit-box-shadow: 0 6px 9px -8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 9px -8px rgba(0, 0, 0, 0.25);
  content: "";
  height: 30px;
  position: absolute;
  top: -20px;
  width: 60px;
  z-index: 10;
}
.hiddenCorner:before {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-color: #F5F5F5 #F5F5F5 rgba(255, 255, 255, 0.3);
  right: -35px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hiddenCorner:after,.hiddenCorner:before {
  background: none repeat scroll 0 0 #eeeeee;
  -webkit-box-shadow: 0 6px 9px -8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 9px -8px rgba(0, 0, 0, 0.25);
  content: "";
  height: 30px;
  position: absolute;
  top: -20px;
  width: 60px;
  z-index: 10;
}
.hiddenCornerDown:after {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-color: #F5F5F5 #F5F5F5 rgba(255, 255, 255, 0.3);
  left: -35px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.hiddenCornerDown:after,.hiddenCornerDown:before {
  background: none repeat scroll 0 0 #eeeeee;
  bottom: -20px;
  -webkit-box-shadow: 0 6px 9px -8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 9px -8px rgba(0, 0, 0, 0.25);
  content: "";
  height: 30px;
  position: absolute;
  width: 60px;
}
.hiddenCornerDown:before {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-color: #F5F5F5 #F5F5F5 rgba(255, 255, 255, 0.3);
  right: -35px;
 -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.hiddenCornerDown:after,.hiddenCornerDown:before {
  background: none repeat scroll 0 0 #eeeeee;
  bottom: -20px;
  -webkit-box-shadow: 0 6px 9px -8px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 9px -8px rgba(0, 0, 0, 0.25);
  content: "";
  height: 30px;
  position: absolute;
  width: 60px;
}
div.letter {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background-color: white;
  border: 1px solid #E9E9E9;
  -webkit-box-shadow: 0 0 1px #E9E9E9;
  box-shadow: 0 0 1px #E9E9E9;
  padding-bottom: 0;
  float: left;
  overflow: visible;
  text-align: left;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 80%;
  padding:20px 40px;
  height:280px;
}
.letter img{
  float:left;
  padding-right:15px;
  padding-bottom:10px;
}
Tucked Corners
Image 1. Tucked corners with CSS3.

Leave a comment