كيفية رسم شبه منحرف/شبه منحرف مع css3؟

عندما تنتقل إلى الصفحة http://m.google.com باستخدام Mobile Safari ، سترى الشريط الجميل في الجزء العلوي من الصفحة.

أريد أن أرسم بعض المنحرفات (الولايات المتحدة: شبه منحرفة) ، لكنني لا أعرف كيف. هل يجب علي استخدام التحويل الثلاثي الأبعاد css3؟ إذا كان لديك طريقة جيدة لتحقيق ذلك من فضلك قل لي.

23
ربما أفتقد شيئًا ، ولكن أليس كذلك مجرد صورة تدرج مطبقة على علامة body؟ إذا كان الأمر كذلك ، فيمكنك استخدام التدرجات css3 ... لا أعرف ماذا تعني كلمة "trapeziums".
وأضاف المؤلف chovy, مصدر
تقصد شريط التنقل؟ إنها صورة: google.com/mobile/ صور/mgc3/MGC-هيئة شريط-BG-banner.png
وأضاف المؤلف Blender, مصدر
في الولايات المتحدة ، نقول "شبه منحرف" لرباعي الأطراف مع زوج واحد من الجانبين المتوازيين ، و "شبه منحرف" لرباعي بدون جوانب متوازية. خارج الولايات المتحدة ، "trapezium" = US :: "شبه منحرف" ، و US :: "trapezium" هو مجرد "غير منتظم". مع العلم نصف المعركة ~
وأضاف المؤلف Andrew Kozak, مصدر

3 إجابة

يمكنك استخدام بعض CSS مثل هذا:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
<div id="trapezoid"></div>
</div> </div>

إنه لأمر رائع أن تجعل كل هذه الأشكال ، إلقاء نظرة على أشكال أكثر لطيفة على:

http://css-tricks.com/examples/ShapesOfCSS/

تصحيح: يتم تطبيق هذا CSS على عنصر DIV

38
وأضاف
شكرا جزيلا لك! لقد رأيت هذا الموقع من قبل ولكنني نسيت ذلك الليلة الماضية! لقد حلت مشكلة أشكر لك حقا.
وأضاف المؤلف CashLee李秉骏, مصدر
Kishan: راجع هذه الإجابة عن شبه منحرف مستجيب stackoverflow.com/a/26628030/933633
وأضاف المؤلف TheCarver, مصدر
سيدي ، أريد شكل trapziod مستجيب. هل تستطيع اخباري اي شيئ عنه؟
وأضاف المؤلف Kishan, مصدر
مرحبًا بك ، إنه أحد المواقع المفضلة لدي ، يمكنك العثور على الكثير من المعلومات المفيدة هناك.
وأضاف المؤلف ElHacker, مصدر

نظرًا لأن هذا العمر قديمًا جدًا ، أشعر أنه يمكن استخدامه مع بعض الإجابات المحدثة الجديدة مع بعض التقنيات الجديدة.

CSS تحويل المنظور

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}
<div class="trapezoid"></div>
</div> </div>

SVG

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

 
 
</div> </div>

اللوحة القماشية

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var c = document.getElementById("myاللوحة القماشية");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();
<��������������������������������������������
���</div>
26
وأضاف

لديك بعض الخيارات المتاحة لك. يمكنك ببساطة استخدام صورة ، أو رسم شيء باستخدام svg أو تشويه div منتظم بتحويلات css. ستكون الصورة أسهل ، وستعمل عبر جميع المتصفحات. الرسم في svg أكثر تعقيدًا بعض الشيء ولا يمكن ضمان عمله على جميع الأصعدة.

إن استخدام تحويلات CSS من ناحية أخرى قد يعني أنه يجب أن يكون لديك divs في الخلفية ، ثم قم بوضع طبقة النص الفعلي عليها في عنصر آخر بحيث لا يكون النص منحرفًا أيضًا. مرة أخرى ، لا يكون دعم المتصفح مضمونًا.

1
وأضاف