<div class="eraser-wrapper">
<!-- <div class="text">for neat & clean erasing</div> -->
<div class="blob">
</div>
<div class="text">
<div>non</div>
<div>dust</div>
<div>eraser</div>
</div>
<div class="eraser"></div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
html {
box-sizing: border-box;
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body {
display: grid;
place-items: center;
min-height: 100vh;
background: #ececec;
}
.eraser-wrapper {
width: 40vmin;
height: 25vmin;
border-radius: 1vmin;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(#7ea246 4% ,#0175a2 5%, #0175a2 75%, #f7f7f7 76%, #f7f7f7 94%, #a7a7a7);
position: relative;
filter: drop-shadow(0 0 6px #a7a7a7);
// .text {
// position: absolute;
// bottom: 1.5vmin;
// font-family: 'Roboto', sans-serif;
// left: 3.8vmin;
// font-size: 3.1vmin;
// }
.blob {
width: 50vmin;
height: 22vmin;
background: #8fbd40;
clip-path: circle(50% at 90% 120%);
position: absolute;
right: 0;
top: -3.2vmin;
}
.text {
position: absolute;
right: 4vmin;
font-family: 'Roboto', sans-serif;
color: #fff;
div {
line-height: 1;
position: relative;
&:nth-child(1){
font-size: 4vmin;
font-weight: 500;
left: 1.8vmin;
top: .6vmin;
letter-spacing: 0.5vmin;
}
&:nth-child(2){
font-size: 5.5vmin;
font-weight: 700;
left: -2vmin;
letter-spacing: 0.4vmin;
}
&:nth-child(3){
font-size: 3vmin;
font-weight: 100;
letter-spacing: .5vmin;
color: #f3f3f3;
left: 1vmin;
top: -.5vmin;
}
}
}
.eraser {
width: 15vmin;
height: 23.5vmin;
border-radius: 1vmin 0 0 1vmin;
position: absolute;
left: -14vmin;
background: linear-gradient(#f8f7fb 2%, #dfe3ec 94% ,#c0c4c7);
// border: 1px solid #eee;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.