<div name='green' id='rc'>THE</div> 
<div name='cent'>WEB</div>
<div name='green' id='lc'>DEV</div> 
<STYLE FSCSS>
  
    $bg-color: rgba(091,180,010,0.4);
    $color: #06f; 
 
  BODY{
    Padding: 15%;
    display: flex; 
    text-Align: center;
    Align-content: center;
    background: $bg-color!; 
    Color: $color!; } 
  DIV{ 
    display: inline-block;
    Align-item: center;
    %2(
    width, 
    height[:100px;]) 
    %2(border,
    outline
    [:3px solid green;])
    Background-color: #fff;
    Line-height: 100px; 
    Font-weight: 700; 
  } $(name: green){ 
    background: conic-gradient(#0f0, #0f3);
  } $(name:cent){ 
    background: #fff;
  }
  #rc{ 
    border-radius: 5px 0 0 5px;
  }
  #lc{
    border-radius: 0 5px 5px 0;
  } 
</STYLE>

 ( function() { var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.async = true; sc.src = 'https://cdn.jsdelivr.net/gh/Figsh/FSCSS@main/fs4.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sc,s); } )();