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

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

رسم قفل باستخدام الـ css

رسم قفل باستخدام الـ css

html

<div></div>

css

body {
   padding: 150px;
}
div {
   height: 120px;
   width: 120px;
   background-color: #333;
   border-radius: 20px;
   position: relative;
}
div::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   height: 40px;
   width: 20px;
   background-color: #fff;
   border-radius: 20px;
}
div::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   height: 35px;
   width: 15px;
   background-color: #fff;
   border-radius: 20px;
}
div::after {
   content: "";
   position: absolute;
   top: -65px;
   left: 50%;
   transform: translateX(-50%);
   height: 80px;
   width: 60px;
   border-top-left-radius: 90px;
   border-top-right-radius: 90px;
   border: 10px solid #333; 
   border-bottom: 0;
   background-color: #fff;
   border-radius: 20px;
   z-index: -1;
}
مصدر الاكواد