I am attempting to replicate the Google logo using HTML and CSS.
While the code functions properly in browsers, there seems to be an issue with Codepen not positioning the horizontal blue line correctly.
How can this be resolved?
What adjustments should be made to the .horizontal-color class properties to ensure consistent performance across Codepen and browser platforms?
Currently, the following code is functioning seamlessly in all web browsers:
<body>
<div class="wrap">
<div class="color3"></div>
<div class="right-center-color"></div>
<div class="horizontal-color"></div>
</div>
<div class="wrap"></div>
<div class="wrap"></div>
</body>
</html>
* {
box-sizing: border-box !important;
}
body {
margin: 0;
padding: 0;
background: #233637;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
html {
font-size: 125%;
}
.wrap {
width: 15rem;
height: 15rem;
}
.wrap:nth-child(1) {
position: relative;
}
.wrap:nth-child(2) {
position: absolute;
border-radius: 50%;
border-top: 3rem solid transparent;
border-right: 3rem solid transparent;
border-bottom: 3rem solid #2ba14b;
border-left: 3rem solid transparent;
transform: rotate(20deg);
}
.wrap:nth-child(3) {
position: absolute;
border-radius: 50%;
border-top: 3rem solid #e33e2b;
border-right: 3rem solid transparent;
border-bottom: 3rem solid transparent;
border-left: 3rem solid transparent;
transform: rotate(-20deg);
}
.color3 {
position: absolute;
width: 15rem;
height: 15rem;
border-radius: 50%;
border-top: 3rem solid #e33e2b;
border-right: 3rem solid transparent;
border-left: 3rem solid #f1b500;
border-bottom: 3rem solid #2ba14b;
}
.right-center-color {
position: absolute;
width: 15rem;
height: 15rem;
border-radius: 50%;
border: 3rem solid transparent;
border-right: 3rem solid #3a7cec;
transform: rotate(45deg);
z-index: -1;
}
.horizontal-color {
height: 3rem;
width: 8rem;
background-color: #3a7cec;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
border-bottom-right-radius: 1.5rem;
}