Css3 के साथ एक trapezium/trapezoid कैसे आकर्षित करें?

जब आप मोबाइल सफारी का उपयोग करके http://m.google.com पृष्ठ पर जाते हैं, तो आपको सुंदर बार दिखाई देगा पेज के शीर्ष पर।

मैं कुछ ट्रैपेज़ियम (यूएस: ट्रेपेज़िड्स) को इस तरह आकर्षित करना चाहता हूं, लेकिन मुझे नहीं पता कि कैसे। क्या मुझे सीएसएस 3 डी डी ट्रांसफॉर्म का उपयोग करना चाहिए? यदि आपके पास इसे प्राप्त करने के लिए एक अच्छी विधि है तो कृपया मुझे बताएं।

23
शायद मुझे कुछ याद आ रहा है, लेकिन क्या यह सिर्फ शरीर की टैग पर लागू एक ढाल छवि नहीं है? यदि ऐसा है तो आप सीएसएस 3 ग्रेडियेंट्स का उपयोग कर सकते हैं ... मुझे नहीं पता कि "trapeziums" का क्या अर्थ है।
जोड़ा लेखक chovy, स्रोत
आपका मतलब नेविगेशन बार है? यह एक छवि है: google.com/mobile/ छवियों/mgc3/एमजीसी शरीर उपकरण पट्टी-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/

संपादित करें: यह सीएसएस एक डीआईवी तत्व पर लागू होता है

38
जोड़ा
बहुत बहुत धन्यवाद !!! मैंने पहले इस वेबसाइट को देखा था लेकिन मैं कल रात भूल गया था! मैंने समस्या हल कर दी है.सच में धन्यवाद!
जोड़ा लेखक CashLee李秉骏, स्रोत
@ किशन: उत्तरदायी ट्रैपेज़ॉयड stackoverflow.com/a/26628030/933633 के लिए यह उत्तर देखें
जोड़ा लेखक TheCarver, स्रोत
महोदय, मैं उत्तरदायी trapziod आकार चाहता हूँ। क्या आप मुझे इसके बारे में कुछ बता सकते हैं?
जोड़ा लेखक 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>

एसवीजी

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

<�������������������������������
����/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
जोड़ा

आपके पास कुछ विकल्प उपलब्ध हैं। आप केवल एक छवि का उपयोग कर सकते हैं, एसवीजी के साथ कुछ खींच सकते हैं या सीएसएस ट्रांसफॉर्म के साथ नियमित div को विकृत कर सकते हैं। एक छवि सबसे आसान होगी, और सभी ब्राउज़रों में काम करेगा। एसवीजी में ड्राइंग थोड़ा अधिक जटिल है और बोर्ड में काम करने की गारंटी नहीं है।

दूसरी ओर सीएसएस ट्रांसफॉर्म का उपयोग करने का मतलब यह होगा कि आपको पृष्ठभूमि में अपना आकार divs रखना होगा, फिर उन पर वास्तविक पाठ को किसी अन्य तत्व में ले जाना होगा ताकि पाठ भी खराब न हो। फिर, ब्राउज़र समर्थन की गारंटी नहीं है।

1
जोड़ा