عنصر انحراف CSS وتحقيق أعلى حدود مستديرة داخلية

في تصميم الويب، قد يكون من الصعب تكرار العناصر الرسومية المعقدة بدقة واستجابة باستخدام CSS. أحد هذه التحديات هو إنشاء عنصر منحرف بحدود داخلية مستديرة.

تعريف بنية HTML

أولاً، دعونا نحدد بنية HTML:

تنفيذ CSSلتحريف العنصر وإضافة الحد الداخلي المستدير العلوي، سنستخدم CSS التالي:

.الرأس { الحد العلوي: 20 بكسل أزرق خالص؛ الارتفاع: 100 بكسل؛ الموقف: نسبي؛ الفائض: مخفي؛ } .الرأس: قبل، .الرأس: بعد { محتوى: ""؛ محاذاة رأسية:أعلى؛ العرض: كتلة مضمنة؛ أصل التحويل: أعلى اليمين؛ تحويل: انحراف (-40 درجة)؛ } .الرأس: قبل { الارتفاع: 100%؛ العرض: 50%؛ نصف قطر الحدود: 0 0 20px 0; الخلفية: أزرق؛ } .الرأس: بعد { الارتفاع: 20 بكسل؛ العرض: 20 بكسل؛ الهامش الأيسر:-1px; الخلفية: متدرجة نصف قطرية (دائرة في أسفل اليمين، شفافة بنسبة 68%، زرقاء بنسبة 73%)؛

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before,
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
}

.header:before {
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}

.header:after {
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

الجمع بين الانحراف والحدود الداخلية

من خلال الجمع بين العنصر المنحرف والحد الداخلي نحقق المطلوب التأثير:

.header { الحد العلوي: 20 بكسل أزرق خالص؛ الارتفاع: 100 بكسل؛ الموقف: نسبي؛ الفائض: مخفي؛ } .الرأس: قبل { محتوى: ""؛ محاذاة رأسية:أعلى؛ العرض: كتلة مضمنة؛ أصل التحويل: أعلى اليمين؛ تحويل: انحراف (-40 درجة)؛ الارتفاع: 100%؛ العرض: 50%؛ نصف قطر الحدود: 0 0 20px 0; الخلفية: أزرق؛ } .الرأس: بعد { محتوى: ""؛ محاذاة رأسية:أعلى؛ العرض: كتلة مضمنة؛ أصل التحويل: أعلى اليمين؛ تحويل: انحراف (-40 درجة)؛ الارتفاع: 20 بكسل؛ العرض: 20 بكسل؛ الهامش الأيسر:-1px; الخلفية: متدرجة نصف قطرية (دائرة في أسفل اليمين، شفافة بنسبة 68%، زرقاء بنسبة 73%)؛

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}