فاصلة
  • TUTORIAL
  • ?
    : ترتيب الدرس
  • 3
    عدد الدروس
  • ?
    أخر تحديث

تصميم شعار جوجل عن طريق لغة CSS

HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="logo"></div>
</body>
</html>

CSS

.logo {
display: flex;
height:200px;
width: 200px;
border-radius: 50%;
margin: auto;
transform: translate(10%,60%);
border-top: solid 65px #E33E2B;
 border-right:  solid 65px #3A7CEC;
 border-bottom:  solid 65px #2BA14B;
 border-left:  solid 65px#F1B500;
         } 
  .logo:before {
content: ';
position: absolute;
height: 59px;width: 150px;
background-color: #3a7cec;
right: -31%;top: 36%;    
   }    
.logo:after {
content: ';
position: absolute;
height: 60px;width: 170px;
right: -95%;
top: -96%;
border-top: 100px solid transparent;
border-right: 100px solid #fff;
border-bottom: 100px solid transparent;
border-bottom: 100px solid transparent;
transform: rotate(90deg);
    }
شعار جوجل بيبسي لوجو ماكدونالد لوجو