मुझे केवल HTML, CSS, JS का उपयोग करके यही करना है

मैंने अब तक यही किया है

मैं इस मौसम को tr/td और कुछ svg आइकन के साथ नीचे में बनाने की कोशिश कर रहा हूं, लेकिन मैं कहीं नहीं जा रहा हूं, मैंने पैडिंग प्लस बॉर्डर रेडियस और बैकग्राउंड कलर जैसी कुछ भी कोशिश की है, लेकिन काम नहीं कर रहा है, मैंने केवल HTML, CSS का उपयोग करने की अनुमति दी है ई जेएस (बूटस्ट्रैप, jQuery, कोणीय, या किसी अन्य एपीआई/फ्रेमवर्क का उपयोग नहीं कर सकता) शायद यह आसान है लेकिन मैं एक अनुभवी फ्रंट-एंड देव नहीं हूं।

.white{
    background: #979797;
    border-radius: 20%;
    padding: 4px;
} 
0
gabriel costa 22 अक्टूबर 2020, 21:08

1 उत्तर

सबसे बढ़िया उत्तर

आपके हाइलाइट किए गए क्षेत्र से मैं यह मान सकता हूं कि आप एक धराशायी रेखा और उसके ऊपर एक ठोस मोटी रेखा की तलाश कर रहे हैं। अगर मेरी धारणा सही है तो मुझे लगता है कि निम्नलिखित सीएसएस स्निपेट आपकी मदद कर सकता है। यह सिर्फ एक मोटा स्केच है:

div {
  position: relative;
  height: 20px;
  width: 100px;
}
div:before,
div:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
div:before {
  border-bottom: 2px dashed red;
  width: 100%;
}
div:after {
  border-bottom: 4px solid red;
  width: 50%;
  border-radius: 4px 0 0 4px;
}

यहां मैंने एक div को लक्षित किया है (आप एक वर्ग जोड़ सकते हैं या किसी अन्य तत्व को लक्षित कर सकते हैं)। फिर :before और :after छद्म तत्वों में मैंने दो लाइनें (धराशायी और ठोस) बनाने के लिए शैलियों को जोड़ा है

-1
Shuvo 22 अक्टूबर 2020, 18:26