html - how to implement background with multiple color and diagonal form at both side? -

मेरा लक्ष्य डिजाइन

मेरे पास यह डिज़ाइन हैं - -

:: SPORTS :: के बाद

के लिए :: सीएसएस के बाद

  प्रदर्शन: ब्लॉक; -वेबकिट-बॉक्स-आकार: सीमा-बॉक्स; -मोज़ बॉक्स-आकार: सीमा-बॉक्स; बॉक्स-आकार: सीमा-बॉक्स; सामग्री: ''; सीमा रंग: वारिस; सीमा-शीर्ष: 0 ठोस आरजीबीए (255, 255, 255, 0); सीमा नीचे: 35 पीएक्स ठोस आरजीबीए (255, 255, 255, 0); सीमा-बाएं: 10px ठोस # f54545; -एमएम-बॉक्स-आकार: सीमा-बॉक्स; पाठ-प्रतिपादन: अनुकूलनशीलता;  

और मैंने :: के बाद जैसे- webkit-border-image, पृष्ठभूमि सीएसएस आदि के लिए सभी संभव सीएसएस की कोशिश की

कैसे लक्ष्य प्राप्त कर सकते हैं डिजाइन।

मुझे डंको के नीचे सीएसएस से मेरा समाधान मिल गया है

  पृष्ठभूमि: रैखिक-ढाल (दाएं, # एफएफ3333 0%, # एफएफ3333 85%, # 3399 सीसी 85%, # 3399 सीसी 90%, # एफएफएफ 66 90%, # एफएफएफ 66 95%, # एफएफ 00 99 95%, # एफएफ 00 99 100 %); चौड़ाई: 100%; ऊंचाई: 100%; -webkit-परिणत: skewX (-25deg); -वेबकिट-बैकफ़ेस्ट-दृश्यता: छुपा;