Devm
Devendra Maharjan
Profile
Contact
Tutorials
Javascript
Create popup
Linux
Install LAMP
Magento 2 deploy script
PHP
Bash
CSS
Create line with div
Dynamic icon
Mail
Linkedin
Git Hub
Close
Create Git Hub css icon with dynamic size
<style> .github_container{ position:relative; width:var(--container-width,100px); height:var(--container-height,100px); border-radius:50%; background-color:#000; } .top{ position:absolute; width:var(--width,65px); height:var(--height,50px); top:0; bottom:0; left:0; right:0; margin:auto; border-radius:45%; background-color:#fff; } .top:before{ content:""; position:absolute; top:-5; height: var(--pseudo-before-height,25px); width: var(--pseudo-before-width,25px); border-radius: 0% 95%; background-color: #fff; } .top:after{ content:""; position:absolute; top:-5; right:0; height: var(--pseudo-after-height,25px); width: var(--pseudo-after-width,25px); border-radius: 95% 0%; background-color: #fff; } .bottom{ position:absolute; width:var(--width,30px); height:var(--height,30px); bottom:0; left:0; right:0; margin:auto; border-radius:50% 50% 0 0; background-color:#fff; } </style> <script> class Icon { param; constructor(param) { this.param = param; } github(){ const github = document.querySelector(this.param.selector); const top = github.querySelector('.top'); const bottom = github.querySelector('.bottom'); github.style.setProperty('--container-height',this.param.height + 'px'); github.style.setProperty('--container-width',this.param.width + 'px'); top.style.setProperty('--height',Math.floor(50 * this.param.height / 100) + 'px'); top.style.setProperty('--width',Math.floor(65 * this.param.height / 100) + 'px'); bottom.style.setProperty('--height',Math.floor(30 * this.param.height / 100) + 'px'); bottom.style.setProperty('--width',Math.floor(30 * this.param.height / 100) + 'px'); top.style.setProperty('--pseudo-before-height',Math.floor(25 * this.param.height / 100) + 'px'); top.style.setProperty('--pseudo-before-width',Math.floor(25 * this.param.height / 100) + 'px'); top.style.setProperty('--pseudo-after-height',Math.floor(30 * this.param.height / 100) + 'px'); top.style.setProperty('--pseudo-after-width',Math.floor(30 * this.param.height / 100) + 'px'); } } function onload(){ const icon = new Icon({selector:".github_container",height:"40",width:"40"}); icon.github(); } </script> <body onload="onload()"> <div class="github_container"> <div class="top"> </div> <div class="bottom"> </div> </div> </body>