دليل المبرمجين

تسجيل دخول تسجيل جديد

كوب شاهي

رسم كوب شاهي بواسطة Html & css

كوب شاهي

html

<div class="cup">
    <div class="tea-paper">شاهي</div>
</div>
<div class="s"></div>

css

body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   background-color: #1f1f1f;
}
.cup {
   height: 250px;
   width: 220px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #ffffff;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
}
.cup::before {
   content: "";
   position: absolute;
   top: -20px;
   width: 100%;
   height: 40px;
   border-radius: 50%;
   background-color: #6B4100;
   border: 15px solid #ffffff;
   box-sizing: border-box;
   box-shadow: inset 0 0 2px 0 #000;
}
.cup::after {
   content: "";
   position: absolute;
   top: 50px;
   right: -60px;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background-color: transparent;
   border: 15px solid transparent;
   border-top-color: #ffffff;
   border-right-color: #ffffff;
   transform: rotate(45deg);
}
.tea-paper {
   width: 50px;
   height: 50px;
   background-color: olive;
   position: absolute;
   top: 80px;
   right: 65px;
   transform: rotate(-25deg);
   border: 1px solid #555;
   display: flex;
   justify-content: center;
   align-items: center;
}
.tea-paper::before {
   content: "";
   position: absolute;
   height: 2px;
   width: 10px;
   top: 10px;
   right: 20px;
   background-color: #555;
}
.tea-paper::after {
   content: "";
   position: absolute;
   height: 89px;
   width: 2px;
   top: -78px;
   right: 23px;
   background-color: #555555;
   transform: rotate(30deg);
   transform-origin: bottom;
}
.s {
   width: 400px;
   height: 50px;
   background-color: #f1f1f1;
   position: absolute;
   left: 50%;
   top: 487px;
   transform: translateX(-50%);
   border-radius: 20px;
}