सीएसएस

Question

में एक क्रॉस आकार बनाएं यह संभव है, मुझे पता है सभी निम्नलिखित आकार इस लिंक में संभव हो रहे हैं:

http://css-tricks.com/examples/ShapesOfCSS/

लेकिन पार भी संभव होना चाहिए। मुझे अंतर का कहना है कि मैं इस तरह मतलब है:

Answer 1

आप केवल pseudoelements साथ कुछ इस तरह प्राप्त कर सकते थे:

http://jsbin.com/upiyoc/1/edit

#cross { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

#cross:before, #cross:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    background: #d00; 
} 

#cross:before { 
    left: 50%; 
    width: 30%; 
    margin-left: -15%; 
    height: 100%; 
} 

#cross:after { 
    top: 50%; 
    height: 30%; 
    margin-top: -15%; 
    width: 100%; 
} 

पार आनुपातिक स्केल करेगा के आकार, के अनुसार width और height#cross तत्व

---

अद्यतन: एक और समाधान (कम कोड का उपयोग करके) में कई रैखिक-ग्रेडियेंट (छद्म छल्ले के बिना) शामिल हो सकता है।

http://codepen.io/anon/pen/zxwgPo

बेशक

#cross { 
    width: 100px; 
    height: 100px; 

    background: linear-gradient(to bottom, transparent 35%, 
             #d00 35%, 
             #d00 65%, 
             transparent 65%), 

       linear-gradient(to right, transparent 35%, 
             #d00 35%, 
             #d00 65%, 
             transparent 65%), 
} 

Answer 2

यह है। आपको बस दो तत्वों का उपयोग करना होगा: http://jsfiddle.net/92XTx/2/

संलग्न div relative ly स्थित है ताकि दोनों बच्चे पूरी तरह से स्थित हो सकें।

#cross { 
    position: relative; 
    width: 150px; 
    height: 150px; 
} 

यहाँ वे दोनों पूरी तरह से तैनात कर रहे हैं:

#cross div { 
    position: absolute; 
    background: red; 
} 

उन्हें एक के ऊपर दूसरा रखना बनाने के लिए।

और फिर बनाने के अपने आकार:

.cross-vertical { 
    left: 33%; 
    width: 33%; 
    height: 100%; 
} 

.cross-horizontal { 
    top: 33%; 
    width: 100%; 
    height: 33%; 
} 

Answer 3

यह एक नियमित रूप से '+' के साथ साथ चरित्र के साथ एक साथ किया जा सकता है एक text-stroke

DEMO (Webkit,Android only) के साथ

div { 
 
    font-size: 80px; 
 
    -webkit-text-stroke: 20px red; 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
}

<div>+</div>

Answer 4

क्योंकि सभी जवाब मैं यहाँ देख देखो या तो लंबा या विक्रेता-उपसर्ग पर निर्भर है,

#cross { 
 
    background: red; 
 
    height: 100px; 
 
    position: relative; 
 
    left: 50px; 
 
    width: 20px; 
 
} 
 
#cross:after { 
 
    background: red; 
 
    content: ""; 
 
    height: 20px; 
 
    left: -40px; 
 
    position: absolute; 
 
    top: 40px; 
 
    width: 100px; 
 
}

<div id="cross"></div>

Answer 5

सीएसएस रूपांतरण आसानी से प्राप्त प्लस आकार देने के लिए इस्तेमाल किया जा सकता

.close { 
    position: absolute; 
    right: 10px; 
    top: 6px; 
    width: 20px; 
    height: 20px; 
    opacity: 0.3; 
} 
.cross:before, .cross:after { 
    position: absolute; 
    left: 15px; 
    content: ' '; 
    height: 21px; 
    width: 2px; 
    background-color: #333; 
} 
.cross:before { 
    transform: rotate(0deg); 
} 
.cross:after { 
    transform: rotate(-90deg); 
}