Zeichne ein X in CSS

Question 1

Ich habe ein div, das wie ein orangefarbenes Quadrat aussieht

Ich möchte irgendwie ein weißes X in dieses div zeichnen, damit es eher so aussieht

Wie auch immer, dies in CSS zu tun, oder wird es einfacher sein, dies einfach in Photoshop zu zeichnen und das Bild als div-Hintergrund zu verwenden? Der div-Code sieht einfach so aus

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}

Question 2

Sie möchten eine Entität, die als Kreuzmarke bekannt ist:

http://www.fileformat.info/info/unicode/char/274c/index.htm

Der Code dafür ist ❌ und es wird wie ❌ angezeigt

Wenn Sie eine perfekt zentrierte Kreuzmarkierung wünschen, gehen Sie wie folgt vor:

versuche folgendes CSS:

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
    position: relative;
}

div:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "\274c"; /* use the hex value here... */
    font-size: 50px; 
    color: #FFF;
    line-height: 100px;
    text-align: center;
}

Siehe Demo-Geige

Browserübergreifendes Problem

Die Kreuzmarkierungsentität wird nicht mit Safari oder Chrome angezeigt. Dieselbe Entität wird jedoch in Firefox, IE und Opera gut angezeigt.

Es ist sicher, das kleinere, aber ähnlich geformte Multiplikationszeichen zu verwenden, × was als × angezeigt wird.

Question 3

Einzelelementlösung:

body{
    background:blue;
}

div{
    width:40px;
    height:40px;
    background-color:red;
    position:relative;
    border-radius:6px;
    box-shadow:2px 2px 4px 0 white;
}

div:before,div:after{
    content:'';
    position:absolute;
    width:36px;
    height:4px;
    background-color:white;
    border-radius:2px;
    top:16px;
    box-shadow:0 0 2px 0 #ccc;
}

div:before{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    left:2px;
}
div:after{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right:2px;
}

<div></div>

Question 4

Noch ein anderer reines CSS Lösung (dh ohne die Verwendung von Bildern, Zeichen oder zusätzlichen Schriftarten), basierend auf @Bansoa ist die Antwort.

Ich habe es vereinfacht und ein bisschen hinzugefügt Flexbox Magie, um es ansprechbar zu machen.

Cross skaliert in diesem Beispiel automatisch auf jeden quadratischen Container, und um die Dicke seiner Linien zu ändern, muss man nur tunen height: 4px; (um ein Kreuz zu machen wirklich reaktionsschnellmöchten Sie vielleicht die einstellen height in Prozent oder anderen relativen Einheiten).

div {
    position: relative;
    height: 150px; /* this can be anything */
    width: 150px;  /* ...but maintain 1:1 aspect ratio */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div::before,
div::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 4px; /* cross thickness */
    background-color: black;
}

div::before {
    transform: rotate(45deg);
}

div::after {
    transform: rotate(-45deg);
}

<div></div>

Question 5

Mit CSS-Verläufen können Sie ein hübsches X erstellen:

Demo: https://codepen.io/JasonWoof/pen/rZyRKR

Code:

<span class="close-x"></span>
<style>
    .close-x {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 7px solid #f56b00;
        background:
            linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
            linear-gradient(135deg, #f56b00 0%,#f56b00 43%,#fff 45%,#fff 55%,#f56b00 57%,#f56b00 100%);
    }
</style>

Question 6

Sie könnten einfach den Buchstaben X in den HTML-Code innerhalb des div einfügen und ihn dann mit CSS formatieren.

Siehe JSFiddle: http://jsfiddle.net/uSwbN/

HTML:

<div id="orangeBox">
  <span id="x">X</span>
</div>

CSS:

#orangeBox {
  background: #f90;
  color: #fff;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

Question 7

Noch ein weiterer Versuch … dieser verwendet x. Viele der Beispiele auf dieser Seite werden für mich nur als Box angezeigt, aber × funktioniert

HTML

<div class="close"></div>

CSS

.close {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}
.close:after {
    position:relative;
    content:"\d7";
    font-size:177px;
    color:white;
    font-weight:bold;
    top:-53px;
    left:-2px
}

JSFIDDLE

Question 8

Sie können die CSS-Eigenschaft “content” verwenden:

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}

div:after {
    content: "X";
    font-size: 2em; 
    color: #FFF;
}

So was:
http://jsfiddle.net/HKtFV/