Eureka Moment Wiki

One eureka moment at the time

User Tools

Site Tools


development:css:tucked_corners

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

development:css:tucked_corners [2017/12/12 10:08] (current)
tplecko created
Line 1: Line 1:
 +====== Tucked corners ======
 +CSS tucked corners
  
 +HTML:
 +<code html>
 +<div class="​corners"><​br /> Content</​div>​
 +</​code>​
 +CSS:
 +<code css>
 +body {
 +background: #e6e6e6;
 +}
 +.corners { 
 +background: #f6f6f6;
 +height: 700px;
 +margin: 50px auto;
 +max-width: 600px;
 +position: relative;
 +width: 80%;
 +-webkit-box-shadow:​ 0 1px 7px hsla(0,​0%,​0%,​.2);​
 +-moz-box-shadow:​ 0 1px 7px hsla(0,​0%,​0%,​.2);​
 +box-shadow: 0 1px 7px hsla(0,​0%,​0%,​.2);​
 +}
 +/* Corner Effect */
 +.corners:​after,​
 +.corners:​before {
 +background: #e6e6e6;
 +content: '';​
 +height: 50px;
 +position: absolute;
 +top: -25px;
 +width: 100px;
 +-webkit-box-shadow:​ 0 5px 10px -7px hsla(0,​0%,​0%,​.5);​
 +-moz-box-shadow:​ 0 5px 10px -7px hsla(0,​0%,​0%,​.5);​
 +box-shadow: 0 5px 10px -7px hsla(0,​0%,​0%,​.5);​
 +}
 +.corners:​after {
 +left: -50px;
 +-webkit-transform:​ rotate(-45deg);​
 +-moz-transform:​ rotate(-45deg);​
 +-ms-transform:​ rotate(-45deg);​
 +-o-transform:​ rotate(-45deg);​
 +transform: rotate(-45deg);​
 +}
 +.corners:​before {
 +right: -50px;
 +-webkit-transform:​ rotate(45deg);​
 +-moz-transform:​ rotate(45deg);​
 +-ms-transform:​ rotate(45deg);​
 +-o-transform:​ rotate(45deg);​
 +transform: rotate(45deg);​
 +}
 +</​code>​
development/css/tucked_corners.txt · Last modified: 2017/12/12 10:08 by tplecko