nuclear sign

by Richard Hunter

HTML

<div class="nuclear-sign"></div>
    <div class="circle"></div>

SCSS

.circle {
    
    border-radius: 50%;
    display : inline-block;
    padding : 100px;
    
    border : solid 20px white;
    z-index : 2;
    position : absolute;
    
}

.nuclear-sign {
    $ratio = 1.732050808;
    position : absolute;
    top : 50px;
    left : 50px;
    width : 400px;
    height : 400px;
    $foo : 100px;
    
 

    &:before {
        position : absolute;
        display : inline-block;
            z-index : -1;
        content : "";
        border-bottom : solid ($ratio * $foo) black;
        border-left : solid $foo yellow;
        border-right : solid $foo yellow;
        top : ($ratio * $foo);
            
            
    }
        
        &:after {
            position : absolute;
            display : inline-block;
            content : "";
            border-top : solid ($ratio * $foo) yellow;
            border-left : solid $foo black;
            border-right : solid $foo black;
            
        }
    
    
    
}

.bar{
    
    
    border-radius : 50%;
    padding : 50px;
    margin: 10px;
    
    display : inline-block;
    border : solid 20px rgba(4,6,8,0.5);
    box-shadow : 0 0 0px 10px blue, 0 0 0 20px green;
    
    
}