Skip to main content

Posts

Showing posts from May, 2021

Learn CSS selectors with examples that are used in everyday life of web ...

Learn :empty, :active, :checked, :focus in CSS

Beautiful CSS for curved lines

 CSS for the following image <style> .container{   height:100vh;   width:100%;   background:#000;   }   .in{     margin: auto;    position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0;   }   .inner{   height:180px;   width:180px;   background-image: linear-gradient(to bottom,yellow 20px,#000 20px);   background-size:100% 41px;   }   .inner1{   height:200px;   width:180px;   background:#000;   border-radius:0 100% 100% 0;   margin-left:10%;   }   .inner2{   height:200px;   width:180px;   background:#000;   border-radius:100% 0 0 100%;   margin-right:10%   } </style> <div class="container">   <div class="in inner">   </div>   <div class="in inner1">   </div>   <div class="in inner2">   </div>    </div>