.content
.mocked.mocked--heading
.mocked.mocked--subtitle
div
- for (var i = 0; i < 4; i++)
.mocked.mocked--line
div
- for (var i = 0; i < 4; i++)
.mocked.mocked--line
.corner-share
|<svg class="icon" style="width:18px;height:18px" viewBox="0 0 24 24">
| <path fill="#FFF" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" />
|</svg>
a.corner-share__left
|<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
| <path fill="#FFF" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
|</svg>
a.corner-share__right
|<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
| <path fill="#FFF" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
|</svg>
View Compiled
body {
background: #eee;
font-size: 16px;
}
.content {
box-sizing: border-box;
position: relative;
width: 90%;
max-width: 800px;
margin: 20px auto;
padding: 30px;
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mocked {
display: block;
background: #f4f4f4;
width: 100%;
height: 1em;
&--heading {
font-size: 3em;
}
&--subtitle {
font-size: 1.5em;
width: 50%;
margin-top: 0.5em;
}
&--line {
height: 1em;
margin-top: 0.5em;
&:first-child {
margin-top: 1em;
}
&:last-child {
width: 50%;
}
}
&--image {
width: 200px;
height: 200px;
}
}
.corner-share {
$size: 60px;
$hover-size: $size * 2;
$speed: 0.4s;
width: $size;
height: $size;
position: absolute;
right: 0;
bottom: 0;
background: #75d0ff;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
cursor: pointer;
overflow: hidden;
transition: width, height, box-shadow;
transition-duration: $speed;
&:before {
content: '';
display: block;
width: 100% * sqrt(2);
height: 100% * sqrt(2);
position: absolute;
top: -70%;
left: -70%;
z-index: 1;
background: white;
//background-image: linear-gradient(to left, #ddd 0, #eee 5px, white 20px);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
transform: rotate(45deg);
transition: box-shadow $speed;
}
&:hover {
width: $hover-size;
height: $hover-size;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
&:before {
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}
.corner-share__left,
.corner-share__right {
opacity: 1;
}
& > .icon {
opacity: 0;
}
}
& > .icon {
position: absolute;
right: $size * 0.3;
bottom: $size * 0.3;
margin-right: -9px;
margin-bottom: -9px;
transition: opacity $speed;
}
&__left,
&__right {
display: block;
width: 0.7 * $hover-size;
height: 0.7 * $hover-size;
position: absolute;
bottom: 0;
opacity: 0;
transform: rotate(-45deg);
transition: opacity $speed;
.icon {
position: absolute;
bottom: 70%;
margin-bottom: -14px;
transform: rotate(45deg);
}
}
&__left {
background: #0080d1;
right: 0;
transform-origin: bottom right;
.icon {
left: 70%;
margin-left: -14px;
}
}
&__right {
background: #38b2ff;
left: 100%;
transform-origin: bottom left;
.icon {
right: 70%;
margin-right: -14px;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.