45 درجة زاوية + بوكس ​​الظل - لا شيء سوى CSS

Question

أحتاج إلى إعادة إنشاء التصميم التالي باستخدام فقط CSS:

ما تراه في الصورة هو الجزء العلوي من حاوية موقع الويب - "الروابط" جزء من القائمة الرئيسية.

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

بالنسبة للسجل: أفضل عدم استخدام صورة لأن فرص ظل المربع على المائلة التي تتطابق مع ظل المربع الذي يقدمه المتصفح ، لا سيما عندما يتعلق الأمر بالمتصفحات المتعددة.

كنت أفكر على غرار Div في وضع ودوران مع خلفية بيضاء وظل الصندوق ، لكنني لم أتمكن من بنائه بعد.

أيه أفكار؟

Answer 1

هناك شيء يسمى ورق زجاج يمكن أن يساعدك ذلك على تحويل عناصرك ، حتى في IE!

.myDiv {
    -sand-transform: rotate(45deg);
}

يمكنك فقط توصيله في موقعك وأنت ضبط.

كما يمكنك استخدام تحويلات CSS3 ، والتي سألت عنها في سؤالك: "لا شيء سوى CSS".

للقيام بذلك ، ستستخدم:

 .myDiv {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}

وبفضل جوش وروبرت على ما يعادل الأوبرا:

-o-transform: rotate(45deg);

سيقوم Internet Explorer بإسقاط ClearType على أي نص يحتوي على مرشح مطبق عليه. ولكن يمكنك إضافة عنصر إضافي فارغ داخل العنصر الرئيسي وتطبيق المرشح على هذا العنصر الإضافي. بعد ذلك ، لن يتم تدمير ClearType ويمكن تحقيق نفس النتيجة.

Answer 2

للتناوب ، أنت تبحث عن:

-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);

ضع في اعتبارك أن الدوران هو سمة CSS3 ، لذلك لن تحصل على نفس السلوك عبر جميع المتصفحات. بدلاً من صنع المائل مع صورة ما ، من المحتمل أن يكون من الأفضل إعادة إنشاء المخطط بالكامل. سأقترب من ذلك مع:

1. قسم الرأس ، الذي سيكون له مائل ، الظل ، خلفية القائمة والحشو في الجزء العلوي من المحتوى ، يشبه إلى حد كبير لقطة الشاشة هناك.
2. الصورة التي يمكن أن تكرر على كامل الجسم من المحتوى مع الظل.
3. قسم تذييل.

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

Answer 3

أعتقد أنه يمكنك استخدام التقنيات من http://nicolasgallagher.com/pure-css-speed-bubbles/demo/

هذا هو مجموعة لطيفة حقا وإلهام لاستخدام CSS. يتمتع.

ملاحظة: إنه أكثر أمانًا من تحويلات CSS3.

Answer 4

الدوران يبدو غير ضروري. سأحاول استخدام تأثير مثلث CSS.

سأفترض أن روابطك في ul لذلك يمكن أن تختار CSS ul:before وجعله في الشكل الصحيح.

لا أعرف ماذا سيحدث مع box-shadow ولكن قد يكون الأمر يستحق اللقطة ، وربما سيكون من الأسهل محاذاة في IE دون اللجوء إلى JavaScript.