no way to compare when less than two revisions
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); | ||
| + | } | ||
| + | </ | ||