In this post we will create THOR Hammer logo with HTML and CSS.
HTML
<div class="container"> <div class="outro_logo"> <div class="hammer"></div> <div class="hammer_top"></div> <div class="left_part"></div> <div class="right_part"></div> <div class="handle"></div> <div class="line_1"></div> <div class="line_2"></div> <div class="line_3"></div> </div> </div>
CSS
html{ box-sizing: border-box; } *, *::before, *::after{ box-sizing: border-box;} body{ padding: 0px; margin: 0px; height: 100vh; display: flex; justify-content: center; align-items: center; } .container{ width: 350px; height: 350px; background-color: #000; display: flex; justify-content: center; align-items: center; } .outro_logo{ width: 300px; height: 300px; border: 15px solid #fff; border-radius: 50%; position: relative; overflow: hidden; } .hammer{ width: 130px; height: 130px; background-color: #ffff; position: absolute; top: 40px; left: 85px; transform: rotate(25deg); } .hammer_top{ width: 40px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid transparent; border-bottom: 5px solid #fff; position: absolute; top: 35px; left: 160px; transform: rotate(25deg); } .left_part{ height: 130px; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid transparent; border-right: 20px solid #fff; position: absolute; top: 2px; left: 50px; transform: rotate(25deg); } .right_part{ height: 130px; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #fff; border-right: 20px solid transparent; position: absolute; top: 78px; right: 20px; transform: rotate(25deg); } .handle{ width: 40px; height: 130px; background-color: #fff; position: absolute; top: 159px; left: 70px; transform: rotate(25deg); overflow: hidden; } .line_1{ width: 8px; height: 70px; background-color: #000; transform: rotate(-45deg); position: absolute; top: 210px; left: 80px; } .line_2{ width: 8px; height: 70px; background-color: #000; transform: rotate(-45deg); position: absolute; top: 170px; left: 87px; } .line_3{ width: 8px; height: 70px; background-color: #000; transform: rotate(-45deg); position: absolute; top: 145px; left: 110px; }
Result
