مثلث CSS

شما می توانید آنها را با یک بخش واحد درست کنید. خوب است که برای هر جهت کلاس داشته باشید.

ایده جعبه ای با عرض و ارتفاع صفر است. عرض و ارتفاع واقعی فلش با عرض مرز تعیین می شود. به عنوان مثال ، در یک فلش UP ، مرز پایین رنگ است در حالی که چپ و راست شفاف هستند ، که مثلث را تشکیل می دهد.

دیو اوریت در:

برای یک مثلث دو طرفه ، شایان ذکر است که ارتفاع 86. 6 ٪ از عرض SO (با عرض مرز + مرز به سمت راست) * 0. 866 ٪ = مرز مرز مرز است

psst! یک حساب دیجیتالی ایجاد کنید و 200 دلار اعتبار رایگان برای میزبانی و خدمات مبتنی بر ابر دریافت کنید.

نظرات

توهمی! نمی توانم سرم را دور آن بگیرم!

همان اینجا .. کوایت دشوار!

چگونه می توانم رنگ داخل مثلث را تغییر دهم؟

و بگویید ، اگر من فقط باید اطمینان حاصل کنم که قسمت پایین مثلث در آنجا نیست ، چگونه می توانم این کار را انجام دهم؟

هی ایوش! شما می توانید با تغییر رنگ ها در مرز قابل مشاهده ، به رنگ مثلث تغییر دهید

سلام خیلی ممنون! کار کرد! اما آیا می توانید به من بگویید که چگونه می توانم به این نوع مثلث مرز بدهم؟ (همانطور که فقط از مرز یک دیو تشکیل شده است !!)

سلام تارون! همانطور که فقط از مرز ساخته شده است ، تنها کاری که می توانید انجام دهید افزایش اندازه آن مرز است ، اگر واقعاً مایل هستید ، زیرا این تنها کاری است که می توانید با آن انجام دهید. و برای حفظ تراز باید حاشیه منفی پیکسل های مساوی را به عنوان اندازه مرزها ارائه دهید.

اگر کسی علاقه مند باشد ، این را به یک مخلوط Sass تبدیل کردم.

من برای دستیابی به همان مقاله ، اما با برخی از SCS های عملکردی برای نجات خشک ، کمی به این مقاله نوشتم.

با تشکر از شما برای توضیحات واضح!

چندین صفحه وجود دارد که نشان می دهد چگونه می توان فلش ها را روی وسایل ابزار و غیره قرار داد ، اما آنها مرا کاملاً عرفانی در مورد نحوه کار آنها گذاشتند. اکنون سرانجام ، به لطف این صفحه ، می فهمم!

فقط وایقبلاً نمی توانستم درک کنماین توضیح فقط آن را میخکوب کرد. خیلی ممنون!

این اساساً مانند یک گوشه مرزی سه بعدی غول پیکر است.(هنگامی که رنگ مرزی چپ و بالا متفاوت است ، لبه مورب است ، که برای ساخت این مثلث استفاده می شود).

با تشکر ، TEMC ، اکنون همه چیز معنی دارد.

به هر حال ، بازی با عرض مرزی سمت راست Div ، و تغییر شکل و اندازه مثلث سرگرم کننده است!

با تشکر از شما برای روشن کردن .. حتی از مدیر برای به اشتراک گذاشتن یک ترفندهای دوست داشتنی :) من برای این وب سایت بسیار عالی هستم .. :)

ممنون بخاطر یادآوری! این خیلی طولانی است که من متوجه شده ام که چگونه رنگ های مختلف مرزی با هم رفتار می کنند (به سلولهای جدول فکر کنید).

باهوش. من دوست دارم CSS را ببینم که کارهایی را انجام نمی دهد

آیا می توانید آن را برگردانید؟

بدیهی است ، "1" را با هر آنچه می خواهید جایگزین کنید!

وای ، کار خوب با پرچم در لینک شما

همچنین ، من می خواستم بپرسم که چرا به جای "جامد" از "خسته" استفاده می کنید؟من نتوانستم تفاوت را درک کنم ..

به سلامتی و تبریک دوباره.

سلام ، "شکسته" باعث می شود وقتی درجه 90 درجه نباشد ، به زیبایی ارائه شود.

در اینجا یکی از آنها برای چیزهای مختلف استفاده می کنم:

شما می توانید با اندازه های مرزی بازی کنید تا از اعماق مختلف و مواردی از این دست استفاده کنید.

این ساده ترین نمونه است ، من آن را دوست دارم

با تشکر ، اتو. من مطمئن نبودم که این نحو برای 2 مقدار در رنگ مرز چیست تا اینکه این مقاله را پیدا کردم ، که ممکن است به دیگران کمک کند.

بیش از حد سرد! عاشق روشی که توضیح داده شده است

کسی می داند چرا این به نظر می رسد در WebKit؟

شاید WebKit نتواند آن را به درستی ترسیم کند؟

اگر ابعاد مثلث متقارن نباشد ، تمایل دارید آن خطوط پیچیده را بدست آورید. به نظر می رسد به دلایلی در WebKit بیشتر مورد توجه قرار می گیرد - مطمئناً چرا.

شما ممکن است این را درک کرده باشید ، اما به هر حال اینجا می رود:

برای صاف کردن خطوط ، قانون زیر را اضافه کنید:

بسته به جهت فلش خود با DEG مختلف بازی کنید.

سعی کنید "جعبه سایه: 0 0 2px نارنجی را اضافه کنید."به مثلث. ممکن است کمک کند. در صورت عدم کاهش "2px" در آن یا افزایش ، باعث تغییر عجیب سایه می شود.

ترفند جالب ، من آن را بعد از دیدن در جای دیگر امتحان کردم. سپس من در این وب سایت به ترفند برگ برگ رسیدم و اگر می خواهید مثلث با متن مقیاس کند ، برگ پیچک را به یک مثلث تغییر دهید.

پایین: 25BC UP: 25B2 سمت راست: 25b6

من نمی توانم "نقشه" پیدا کنم ، اما اگر در تغییر 4 رقم آخر در URL بازی کنید ، می توانید انواع چیزهای جالب را پیدا کنید. http://www. decodeunicode.org/fa/u+25bc

شگفت انگیزه!! با تشکر برای به اشتراک گذاری ..

شما می توانید از این مثلث ها برای ایجاد اشیاء سه بعدی در زمان واقعی در IE6 استفاده کنید. بله ، IE6! http://www. uselesspickles.com/triangles/

من با این تکنیک در Firefox 5. 0 (WIN) یک مسئله کوچک را مشاهده کردم. FF 5. 0 در قسمتهای جلوی مثلث یک سکته مغزی سبک ایجاد می کند. در اینجا پیوندی به jsfiddle وجود دارد که مسئله را تکرار می کند:

بدیهی است ، شما باید این نکته را در FF 5. 0 (برنده) مشاهده کنید تا ببینید که من در مورد چه چیزی صحبت می کنم.

به روز رسانی: به نظر می رسد تغییر سبک مرزی به "در قسمتهای شفاف" این عنصر را در Firefox 5 و 6 برطرف می کند. مرورگرهای دیگر حتی پس از این تنظیم به سبک مرزی ، مثلث ها را خوب می کنند.

با تشکر از نکته Inset! من سعی کرده ام یک روز آن سکته نازک را از بین ببرم !!

آموزش عالیedted: نکته عالی در مورد "inset". ذهن من را به دلیل دلیل مرزی عجیب و غریب کار می کرد!

در سناریوهایی مانند زیر ، من در سافاری ، یعنی و برخی از آنها در FF ، پیکسل می گیرم. آیا شخص دیگری این را می گیرد؟

.point_bottom border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 80px solid #FF0000; bottom: 0; height: 0; left: -101px; position: absolute; width: 0;>

اگر مثلث متقارن نباشد ، صاف به نظر نمی رسد. در اصل ، مثل این است که سعی کنید یک خط مستقیم را با زاویه 30 درجه در یک تصویر bitmap بکشید. این خط همیشه کمی مبهم به نظر می رسد.

این ترفند فقط بهره برداری از رفتار CSS است - من معتقدم که CSS قصد انجام این نوع کارها را داشت. اگر می خواهید خطوط واقعاً مستقیم در هر زاویه ای داشته باشید ، ممکن است بخواهید SVG را کشف کنید.

این برای من کار کرد تا همه چیز را صاف کنم: http://stackoverflow.com/a/9945375

حال در مورد یک روش خوب برای اضافه کردن سایه قطره ای به مثلث چطور؟بسیار عالی خواهد بود

شما با استفاده از یک عنصر شبه ، برخی از سایه های قطره ای محدود را انجام می دهید. فقط آن را کمی متفاوت از شکل مثلث اصلی قرار دهید و سپس رنگ و/یا شفافیت را تغییر دهید. با این اثر کمی چرخش زیبا به نظر می رسد. من اخیراً آن را در یک قطعه Nettuts دیدم.

آیا استفاده از این در دکمه [ارسال] امکان پذیر است؟بنابراین نتیجه نهایی به نظر می رسد https://skitch.com/iestynx/fa6et/artwork

اگر این یک سوال احمقانه باشد ، کمی جدید هستم.

من حدس می زنم که دکمه با استفاده از Div. من سعی کردم با استفاده از دو DIV همان ایجاد کنم و من هم همین را گرفتم.

مشکلی که برخی از افراد با لبه های نادرست گزارش داده اند ، مربوط به ضد عفونی کننده است و این واقعیت که شفاف معادل RGBA (0 ، 0 ، 0 ، 0) است. هنگامی که با ضد عفونی کننده ترکیب می شود ، این نتیجه ای را به دست می آورد که نویسنده در نظر گرفته نشده است. من نمی دانم که آیا هر مرورگری در اواسط سال 2009 از آنتی بادی استفاده کرده است ، اما اکنون ، Firefox کاملاً مشخص است.

من در حال نوشتن یک پست وبلاگ هستم (به عنوان بخشی از شروع یک وبلاگ ، که باعث می شود بیشتر طول بکشد ...) با این موضوع خاص با جزئیات کامل ، توضیحات ، احتیاط ها ، et cetera برخورد می کنم ، و من در ابتدا قصد داشتم تا انتظار داشته باشماین کار را قبل از ارسال این کار انجام داده بود. اما از آنجا که چندین هفته از برنامه ریزی آن می گذرد و احتمالاً حداقل تا زمان آماده شدن و ارسال آن حداقل بیشتر خواهم بود ، فهمیدم که باید قبل از اینکه خیلی دیر شود ، افرادی را که از شفاف استفاده نمی کنند ، متوقف کنم.

توصیه کلی من این است که از استفاده از شفاف خودداری کنید ، مگر اینکه بدانید که مناسب است (یعنی سیاه رنگ لمس است). اگر مجبور هستید به مرورگرهایی که از مقادیر RGBA () (IE8 و قبل از آن پشتیبانی نمی کنند) مراقبت کنید ، سپس آن را به عنوان شفاف مشخص کنید و یک مقدار مرزی چپ/راست/بالا/پایین را پس از آن با مقدار RGBA صحیح اضافه کنیدآن را نادیده بگیرید و درست کنید.

من فقط با مسئله ضدیاس بازی می کردم و دریافتم که اگر من عرض مرز را تنظیم کنم تا مثلث متقارن بسازم و سپس یک مقیاس را به مثلث تبدیل کنم تا آن را به ابعاد مناسب کشیده شود ، مرورگر را به سمت آنتیلایا و لبه ها مجبور می کند و می شود. خلاص شدن از شر دلهره.

Transform Trick یک درمان را در WebKit انجام می دهد!

متأسفانه برای من این موارد را در Firefox معرفی می کند. اکنون هر زمان که آن را به بالا یا پایین می رسانم ، یک تقسیم عمودی در وسط مثلث وجود دارد ...