Devm
Devendra Maharjan
Profile
Contact
Tutorials
Javascript
Pass method as parameter
Arrow method for calling async method
Create popup
Linux
Hide output in command
Apply command to output of command
Install LAMP
Magento 2 deploy script
PHP
Bash
CSS
Create line with div
Dynamic icon
Mail
Linkedin
Git Hub
Close
Create mail icon dynamically in css
<style> .letter { background-color: #FFF; position: relative; border-radius:var(--borderRadius,4px); height: var(--height,40px); width: var(--width,50px); overflow: hidden; } .letter:before, .letter:after { content: ''; position: absolute; height: var(--pseudo-height, 50px);; width: var(--pseudo-width, 50px);; transform: rotate(45deg) skew(-5deg, -5deg); background-color: var(--pseudo-bgcolor,#fff); } .letter:before { bottom: var(--pseudo-before-bottom,-85%); box-shadow: var(--pseudo-before-hoffset, -2px) var(--pseudo-before-voffset, -2px) 0 0 rgb(85 64 175); } .letter:after { top: var(---pseudo-after-top,-85%); box-shadow: var(--pseudo-after-hoffset, 2px) var(--pseudo-after-voffset, 2px) 0 0 rgb(85 64 175); } </style> <script> class Icon { param; constructor(param) { this.param = param; } mail() { const mail = document.querySelector(this.param.selector); const radius = Math.floor(this.param.height / 10); mail.style.setProperty('--height',this.param.height + 'px'); mail.style.setProperty('--width',this.param.width + 'px'); mail.style.setProperty('--borderRadius',radius + 'px'); mail.style.setProperty('--pseudo-height',this.param.width + 'px'); mail.style.setProperty('--pseudo-width',this.param.width + 'px'); } } function onload(){ const icon = new Icon({selector:".letter",height:"40",width:"50"}); icon.mail(); } </script> <body onload="onload()"> <div class="mail"> <div class='letter'></div> </div> </body>