Differences
This shows you the differences between two versions of the page.
— | development:css:tucked_corners [2019/10/31 09:04] (current) – created - external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Tucked corners ====== | ||
+ | CSS tucked corners | ||
+ | HTML: | ||
+ | <code html> | ||
+ | <div class=" | ||
+ | </ | ||
+ | CSS: | ||
+ | <code css> | ||
+ | body { | ||
+ | background: #e6e6e6; | ||
+ | } | ||
+ | .corners { | ||
+ | background: #f6f6f6; | ||
+ | height: 700px; | ||
+ | margin: 50px auto; | ||
+ | max-width: 600px; | ||
+ | position: relative; | ||
+ | width: 80%; | ||
+ | -webkit-box-shadow: | ||
+ | -moz-box-shadow: | ||
+ | box-shadow: 0 1px 7px hsla(0, | ||
+ | } | ||
+ | /* Corner Effect */ | ||
+ | .corners: | ||
+ | .corners: | ||
+ | background: #e6e6e6; | ||
+ | content: ''; | ||
+ | height: 50px; | ||
+ | position: absolute; | ||
+ | top: -25px; | ||
+ | width: 100px; | ||
+ | -webkit-box-shadow: | ||
+ | -moz-box-shadow: | ||
+ | box-shadow: 0 5px 10px -7px hsla(0, | ||
+ | } | ||
+ | .corners: | ||
+ | left: -50px; | ||
+ | -webkit-transform: | ||
+ | -moz-transform: | ||
+ | -ms-transform: | ||
+ | -o-transform: | ||
+ | transform: rotate(-45deg); | ||
+ | } | ||
+ | .corners: | ||
+ | right: -50px; | ||
+ | -webkit-transform: | ||
+ | -moz-transform: | ||
+ | -ms-transform: | ||
+ | -o-transform: | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | </ |