CSS
एकल तत्व आकार

वर्ग

एक वर्ग बनाने के लिए, एक चौड़ाई और ऊंचाई दोनों के साथ एक तत्व को परिभाषित करें। नीचे दिए गए उदाहरण में, हमारे पास एक तत्व है जिसकी width और height 100 पिक्सेल प्रत्येक है।

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background: rgb(246, 156, 85);
}

त्रिभुज

CSS त्रिकोण बनाने के लिए 0 पिक्सेल की चौड़ाई और ऊंचाई के साथ एक तत्व को परिभाषित करें। बॉर्डर गुणों का उपयोग करके त्रिकोण आकार का गठन किया जाएगा। 0 ऊँचाई और चौड़ाई वाले एक तत्व के लिए 4 सीमाएँ (ऊपर, दाएँ, नीचे, बाएँ) प्रत्येक त्रिकोण के रूप में। यहाँ 0 ऊँचाई / चौड़ाई और 4 अलग-अलग रंगीन सीमाओं के साथ एक तत्व है।

कुछ सीमाओं को पारदर्शी और दूसरों को एक रंग में सेट करके हम विभिन्न त्रिकोण बना सकते हैं। उदाहरण के लिए, अप त्रिकोण में, हम नीचे की सीमा को वांछित रंग में सेट करते हैं, फिर बाएं और दाएं सीमाओं को पारदर्शी पर सेट करते हैं। यहां बाईं और दाईं सीमाओं के साथ एक छवि दी गई है, जिसमें दिखाया गया है कि त्रिकोण कैसे बनाया जा रहा है।

त्रिभुज के आयामों को अलग-अलग सीमा चौड़ाई में बदलकर बदला जा सकता है - लंबा, छोटा, लम्बा, आदि। नीचे दिए गए उदाहरण 50x50 पिक्सेल त्रिकोण दिखाते हैं।

त्रिभुज - इंगित करना

<div class="triangle-up"></div>

.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid rgb(246, 156, 85);
}

त्रिभुज - नीचे की ओर इशारा करते हुए

<div class="triangle-down"></div>

.triangle-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid rgb(246, 156, 85);
}

त्रिभुज - इंगित अधिकार

<div class="triangle-right"></div>

.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid rgb(246, 156, 85);
}

त्रिभुज - बाईं ओर इंगित करना

<div class="triangle-left"></div>

.triangle-left {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 50px solid rgb(246, 156, 85);
}

त्रिभुज - इंगित / अधिकार

<div class="triangle-up-right"></div>

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

त्रिभुज - इंगित करना / छोड़ना

<div class="triangle-up-left"></div>

.triangle-up-left {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

त्रिभुज - नीचे / दाईं ओर इंगित करता है

<div class="triangle-down-right"></div>

.triangle-down-right {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

त्रिभुज - नीचे / बाएँ इंगित करता है

<div class="triangle-down-left"></div>

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

फटने

फट एक तारे के समान है लेकिन शरीर से कम दूरी तक फैले हुए बिंदुओं के साथ। अतिरिक्त, थोड़ा घुमाए हुए वर्गों के साथ एक फट आकार के बारे में सोचो, शीर्ष पर स्तरित वर्ग।

अतिरिक्त वर्ग psuedo- तत्वों के ::after ::before और ::after का उपयोग करके बनाए जाते हैं।

8 प्वाइंट फट

एक 8 बिंदु फट 2 स्तरित वर्ग हैं। निचला वर्ग तत्व ही है, छद्म तत्व :before अतिरिक्त वर्ग का उपयोग करके बनाया गया है। नीचे 20 ° घुमाया जाता है, शीर्ष वर्ग 135 ° घुमाया जाता है।

<div class="burst-8"></div>

.burst-8 {
  background: rgb(246, 156, 85);
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -ms-transform: rotate(20deg);
  transform: rotate(20eg);
}

.burst-8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

12 प्वाइंट फट गया

एक 12 बिंदु फट 3 स्तरित वर्ग हैं। नीचे का वर्ग तत्व ही है, छद्म तत्वों के :before और :after अतिरिक्त वर्गों का उपयोग करके बनाया जाता है। नीचे 0 ° घुमाया जाता है, अगला वर्ग 30 ° घुमाया जाता है, और शीर्ष 60 ° घुमाया जाता है।

<div class="burst-12"></div>

.burst-12 {
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
}

.burst-12::before {
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.burst-12::after {
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

मंडलियां और एलिप्स

वृत्त

एक सर्कल बनाने के लिए, एक तत्व को एक समान width और height (एक वर्ग ) के साथ परिभाषित करें और फिर इस तत्व की border-radius संपत्ति को 50% ।

एचटीएमएल

<div class="circle"></div>

सीएसएस

.circle {
   width: 50px;
   height: 50px;
   background: rgb(246, 156, 85);
   border-radius: 50%;
}

अंडाकार

एक दीर्घवृत्त एक सर्कल के समान है, लेकिन width और height लिए विभिन्न मूल्यों के साथ।

एचटीएमएल

<div class="oval"></div>

सीएसएस

.oval {
  width: 50px;
  height: 80px;
  background: rgb(246, 156, 85);
  border-radius: 50%;
}

चतुर्भुज

एक ट्रेपोज़ॉइड को शून्य ऊंचाई ( 0px ऊंचाई) के साथ ब्लॉक तत्व द्वारा बनाया जा सकता है, शून्य से अधिक की चौड़ाई और एक सीमा, जो एक तरफ को छोड़कर पारदर्शी है:

HTML:

<div class="trapezoid"></div>

सीएसएस:

.trapezoid {
    width: 50px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
}

सीमा पक्षों को बदलने के साथ, ट्रेपोज़ॉइड के अभिविन्यास को समायोजित किया जा सकता है।

घनक्षेत्र

यह उदाहरण दिखाता है कि छद्म तत्वों पर 2 डी परिवर्तन विधियों skewX() और skewY() का उपयोग करके एक क्यूब कैसे बनाया जाए।

HTML:

<div class="cube"></div>

सीएसएस:

.cube {
  background: #dc2e2e;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 50px;
}

.cube::before {
  content: '';
  display: inline-block;
  background: #f15757;
  width: 100px;
  height: 20px;
  transform: skewX(-40deg);
  position: absolute;
  top: -20px;
  left: 8px;
}

.cube::after {
  content: '';
  display: inline-block;
  background: #9e1515;
  width: 16px;
  height: 100px;
  transform: skewY(-50deg);
  position: absolute;
  top: -10px;
  left: 100%;
}

डेमो देखें

पिरामिड

यह उदाहरण दिखाता है कि कैसे skewY() और 2D रूपांतरण विधियों का उपयोग करके पिरामिड बनाने के लिए skewY() और rotate() छद्म तत्वों पर।

HTML:

<div class="pyramid"></div>

सीएसएस:

.pyramid {
  width: 100px;
  height: 200px;
  position: relative;
  margin: 50px;
}

.pyramid::before,.pyramid::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 50px solid;
  position: absolute;
}

.pyramid::before {
  border-color: transparent transparent #ff5656 transparent;
  transform: scaleY(2) skewY(-40deg) rotate(45deg);
}

.pyramid::after {
  border-color: transparent transparent #d64444 transparent;
  transform: scaleY(2) skewY(40deg) rotate(-45deg);
}