X fermer le bouton uniquement en utilisant css

Comment faire une croix (X) uniquement en css3, pour l'utiliser comme un bouton de fermeture ?

J'ai cherché depuis longtemps, j'ai pas trouvé comment faire....
Quand je regarde le code source sur le site web de l'aide, il y a toujours quelque chose de bizarre qui rendent le code que j'prendre inutilisable.

Le bouton X je veux : http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

Lorsque vous cliquez sur une image, c'est la croix sur la droite.

Je pense que ce serait génial si quelqu'un peut poster un simple universel code css pour faire un simple X croix en css3

Thx

source d'informationauteur hedi

  1. 11

    point principal que vous cherchez est

    tag-remove:before {
content: 'x'; //here is your X(cross) sign.
color: #fff;
font-weight: 300;
font-family: Arial, sans-serif;
}

    remaings vous pouvez le faire par vous-même très facilement.

    EDIT:

    <!DOCTYPE html>
<html>
<head>
<style> 
#mdiv
{
width:25px;
height:25px;
background-color:red;
border:1px solid black;
}
.mdiv
{
height:25px;
width:2px;
margin-left:12px;
background-color:black;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
Z-index:1;

}
.md
{
height:25px;
width:2px;

background-color:black;
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
Z-index:2;

}
</style>
</head>
<body>

<div id="mdiv" >
<div class="mdiv">
<div class="md">
</div>
</div>

<div>

</body>

  2. 26

    Comme un pur CSS solution pour le fermer ou de "temps" symbole vous pouvez utiliser le code ISO avec le contenu de la propriété. J'utilise souvent cette :après ou :avant de pseudo-sélecteurs.

    Le contenu du code est \00d7.

    Exemple

    div:after{
  display: inline-block;
  content: "
    div:after{
display: inline-block;
content: "\00d7"; /* This will render the 'X' */
}
    d7"    ; /* This will render the 'X' */
}

    Vous pouvez ensuite le style et la position de la pseudo-sélecteur de toute façon que vous voulez.
    Espérons que cela aide quelqu'un :).