è possibile, so che tutte le seguenti forme sono possibili in questo link:Creare una forma di croce in CSS
http://css-tricks.com/examples/ShapesOfCSS/
ma croce deve essere possibile anche. Quando dico croce voglio dire in questo modo:
si potrebbe ottenere qualcosa di simile con solo 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%;
}
La dimensione della croce sarà proporzionalmente scala, secondo a width e height dell'elemento #cross
Aggiornamento: un'altra soluzione (utilizzando meno codice) potrebbe semplicemente coinvolgere più gradienti lineari (senza pseudolements), ad es.
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%),
}
Qualcuno può dirmi perché è richiesto "assoluto"? L'ho provato su codepen e se lo si cambia relativo o lo si estrae, non lo mostrerà ... anche con i pixel di altezza e larghezza specificati .... aiuto ... mi fa impazzire non sapendo ( – carinlynchin
senza posizione : in assoluto si dovrebbe dare loro una visualizzazione (o float) altrimenti gli pseudolements non possono essere visibili (non sono elementi reali, e la loro proprietà 'content' è vuota) quindi qui position: absolute rende superfluo usare la proprietà float (o display) – fcalderan
oh ok ... quindi qualsiasi tipo di pseudo elemento senza contenuto deve avere assoluto? puoi mostrarmi dove dice che nel w3. cose come questa vorrei sapere come cercare in quella cosa lol – carinlynchin
Certo che lo è. Devi solo usare due elementi: Vedi http://jsfiddle.net/92XTx/2/
Il div di chiusura è relative posizionato in modo che entrambi i bambini possano essere posizionati in modo assoluto.
#cross {
position: relative;
width: 150px;
height: 150px;
}
Eccoli entrambi posizionato in modo assoluto:
#cross div {
position: absolute;
background: red;
}
per renderli superpose.
e quindi creare le forme:
.cross-vertical {
left: 33%;
width: 33%;
height: 100%;
}
.cross-horizontal {
top: 33%;
width: 100%;
height: 33%;
}
Questo può essere fatto con un normale '+' più carattere insieme ad un text-stroke
div {
font-size: 80px;
-webkit-text-stroke: 20px red;
display: inline-block;
padding: 0 20px;
}<div>+</div>Poiché tutte le risposte che vedo qui guardo o lunghe o vendor-prefisso-dipendente,
#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>CSS Trasforma può essere facilmente utilizzato per ottenere più plasmare
.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);
}
Utilizzare due elementi sovrapposti uno sull'altro? O ancora meglio: un elemento con un :: pseudo elemento (o :: prima) – Kyle
Non puoi farlo con un singolo elemento .. Meglio andare su SVG o su tela ... –
La croce è stata effettivamente aggiunta ai css-tricks ora: https://css-tricks.com/examples/ShapesOfCSS/ – tsiorn