كيفية إنشاء دائرة ذات حدين

يمكن تصميم div في دائرة ذات حدين بشكل مستجيب باستخدام CSS. يمكن تعديل الدائرة الأصلية div CSS المقدمة لإنشاء التأثير المطلوب:

div.circle {
  width: 90%;
  height: 0;
  padding-bottom: 90%;
  margin: auto;
  float: none;
  border-radius: 50%;
  background: pink;
  border: 1px solid green;
  box-shadow: 0 0 0 5px red; /* Adds a second red border */
}

هنا، يتم استخدام خاصية box-shadow لإنشاء حد ثانٍ حول الدائرة. تحدد القيم 0 0 0 5px الإزاحة والتعتيم وانتشار الظل، بينما يحدد اللون الأحمر لون الحدود.

يمكن تنفيذ نهج div الداخلي المذكور في السؤال باستخدام div إضافي داخل دائرة div:

يمكن تصميم القسم الداخلي بلون الخلفية ومحاذاته عموديًا باستخدام flexbox:

div.circle {
  display: flex;
  align-items: center;
  justify-content: center;
}

div.inner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: blue;
}