.headerComponent{ height: 98px; width: 100%; position: relative; background-color: #34343e; overflow: hidden; } .headerComponent .homeHeader{ height: 100%; width: 100%; position: relative; } .headerComponent .homeHeader .headerContent{ height: 100%; width: auto; display: flex; } .headerComponent .homeHeader .headerlogo{ width: 440px; height: 100%; background-color: #ff7860; position: relative; } .headerComponent .homeHeader .headerlogo:after{ content : ''; position: absolute; width: 0; height: 0; /*background-color: #34343e;*/ border-top: 98px solid transparent; border-bottom: 0 solid transparent; border-left: 0 solid transparent; border-right: 40px solid #34343e; top: 0; right: 0; } .headerComponent .homeHeader .headerlogo .logoImg{ position: absolute; top: 50%; left: 40%; transform: translate(-50%,-50%); } .headerComponent .homeHeader .locationInfo{ position: relative; padding-top: 16px; } .headerComponent .homeHeader .locationInfo .addIcon{ display:inline-block; margin: 0 20px; vertical-align: middle; } .headerComponent .homeHeader .locationInfo .local { display: inline-block; line-height: 34px; vertical-align: middle; } .headerComponent .homeHeader .rightContent{ padding-right: 59px; } .headerComponent .homeHeader .rightContent .userheadImg{ width: 72px; height: 72px; border-radius: 50%; margin-right: 24px; transform: translate(0,16%); } .headerComponent .homeHeader .rightContent .userinfo{ line-height: 34px; padding-top: 18px; } .otherHeader{ /*line-height: 97px;*/ padding: 0 30px; line-height: 1.6; } .otherHeader .middle{ vertical-align: middle; } .circleIcon{ display: inline-block; margin-right: 30px; } .iconCircle{ display: inline-block; width: 64px; height: 64px; border: 4px solid #fff; border-radius: 50%; line-height: 55px; text-align: center; /* top: 50%; */ transform: translateY(-1px); vertical-align: middle ; margin-right: 40px; }