إنشاء شريط سريع الاستجابة بزاوية 45 درجة مع زاوية مطوية

هل من الممكن أن يكون لديك شريط CSS على شكل زاوية؟

باستخدام PNG الصورة هي أحد الخيارات، ولكنها ليست مثالية للاستجابة. إليك كيفية إنشائه باستخدام CSS:

.container {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  margin: 10px;
  background: lightblue;
}

.stack-top {
  --d: 5px;
  --g: 16px;
  --c: #333;

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg);
  color: #fff;
  text-align: center;
  width: 100px;
  transform-origin: bottom left;
  padding: 5px 0 calc(var(--d)   5px);
  background:
    linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left,
    linear-gradient(-135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d)),
    0 100%
  );
}

تخصيص الشريط

يمكنك ضبط المتغيرات التالية لتخصيص مظهر الشريط:

• --d: التحكم في حجم طية الزاوية
• --g: التحكم في ارتفاع قمة الشريط
• --c: تحديد لون الشريط الشريط

الاستخدام

لاستخدام الشريط، ما عليك سوى إضافة كود HTML التالي إلى مستندك:

  
1Month

يمكنك أيضًا تحديد المتغيرات المخصصة مباشرة في HTML باستخدام سمة النمط، كما هو موضح في المثال المحدث أدناه:

  
1Month