কিভাবে css3 সঙ্গে একটি trapezium/trapezoid আঁকা?

যখন আপনি মোবাইল সাফারি ব্যবহার করে পৃষ্ঠাটিতে যান http://m.google.com , আপনি সুন্দর বারটি দেখতে পাবেন পৃষ্ঠার উপরে।

আমি কিছু ট্র্যাপিজিয়াম (মার্কিন: ট্র্যাপিজোড) আঁকতে চাই, কিন্তু আমি জানি না কিভাবে। আমি css3 3d রূপান্তর ব্যবহার করা উচিত? যদি আপনার এটি অর্জন করার জন্য একটি ভাল পদ্ধতি আছে দয়া করে আমাকে বলুন।

23
সম্ভবত আমি কিছু অনুভব করছি, কিন্তু এটি কেবল একটি গ্র্যাডিয়েন্ট চিত্র নয় যা শরীরের ট্যাগে প্রয়োগ করা হয়? যদি তাই হয় আপনি css3 gradients ব্যবহার করতে পারে ... আমি জানি না "trapeziums" মানে কি।
যোগ লেখক chovy, উৎস
আপনি ন্যাভিগেশন বার মানে? এটি একটি চিত্র: google.com/mobile/ ইমেজ/mgc3/MGC শরীর-টুলবার-bG-banner.png
যোগ লেখক Blender, উৎস
মার্কিন যুক্তরাষ্ট্রে, আমরা সমান্তরাল পক্ষের এক জোড়া সঙ্গে চতুর্ভুজক্ষেত্রের জন্য "ট্র্যাপজয়েড" এবং কোন সমান্তরাল দিকগুলির সাথে চতুর্ভুজক্ষেত্রের জন্য "ট্র্যাপজিয়াম" বলি। মার্কিন বাইরে, "ট্র্যাপিজিয়াম" = মার্কিন :: "ট্র্যাপজয়েড", এবং মার্কিন :: "ট্র্যাপিজিয়াম" কেবল "অনিয়মিত"। জানাটা অর্ধেক যুদ্ধ ~
যোগ লেখক Andrew Kozak, উৎস

3 উত্তর

আপনি এই মত কিছু সিএসএস ব্যবহার করতে পারেন:

<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李秉骏, উৎস
@ কিশন: প্রতিক্রিয়াশীল ট্রাইপোজয়েড এই প্রশ্নের উত্তর দেখুন stackoverflow.com/a/26628030/933633
যোগ লেখক TheCarver, উৎস
স্যার, আমি প্রতিক্রিয়াশীল ফাঁদজীবনের আকৃতি চাই। তুমি কি আমাকে এটা সম্পর্কে কিছু বলতে পারবে?
যোগ লেখক Kishan, উৎস
আপনি স্বাগত জানাই, এটি আমার প্রিয় সাইটগুলির একটি, আপনি সেখানে প্রচুর দরকারী তথ্য খুঁজে পেতে পারেন।
যোগ লেখক ElHacker, উৎস

এটি এখন পুরনো, আমি মনে করি এটি কিছু নতুন প্রযুক্তির সাথে কিছু নতুন আপডেট হওয়া উত্তরগুলির সাথে ব্যবহার করতে পারে।

সিএসএস ট্রান্সফর্ম দৃষ্টিকোণ

<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">

<�������������������করা SVG>
</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();
<��������������������������������������
�iv> </div>
26
যোগ

আপনার কাছে কয়েকটি বিকল্প রয়েছে। আপনি কেবল একটি চিত্র ব্যবহার করতে পারেন, svg দিয়ে কিছু আঁকতে পারেন বা CSS রুপান্তরগুলির সাথে নিয়মিত ডিভিকে বিকৃত করতে পারেন। একটি ছবি সহজতর হবে, এবং সব ব্রাউজার জুড়ে কাজ করবে। SVG অঙ্কন একটি বিট আরো জটিল এবং বোর্ড জুড়ে কাজ নিশ্চিত করা হয় না।

অন্যদিকে সিএসএস ট্রান্সফরমগুলি ব্যবহার করার অর্থ আপনার পটভূমিতে আপনার আকৃতির divs থাকতে হবে, তারপরে অন্য উপাদানতে তাদের উপর প্রকৃত পাঠ্য লেয়ার করতে হবে যাতে পাঠটিও স্কিউড হয় না। আবার, ব্রাউজার সমর্থন নিশ্চিত করা হয় না।

1
যোগ