X закрыть только с помощью css

Как сделать крест (X) только в css3, использовать как кнопку закрытия?

Я искал с давних пор, я не могу найти, как.... Когда я смотрю на исходный код на веб-сайте, используя его, всегда есть что-то странное, что делает код, который я использую непригодным.

Кнопка X, которую я хочу: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

Когда вы нажимаете изображение, это крест справа.

Я думаю, что было бы здорово, если бы кто-нибудь мог опубликовать простой универсальный код css, чтобы сделать простой X-крест в css3

спасибо

ОТВЕТЫ

Ответ 1

Главное, что вы ищете, это: 

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

К вашему сведению, вы можете сделать кнопку закрытия самостоятельно очень легко: 

<!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);
            Z-index:1;
        }

        .md {
            height: 25px;
            width: 2px;
            background-color: black;
            transform: rotate(90deg);
            Z-index:2;
        }
    </style>
</head>
<body>
    <div id="mdiv">
        <div class="mdiv">
            <div class="md"></div>
        </div>
    <div>
</body>
</html>

Ответ 2

В качестве решения чистого CSS для символа "close" или "times" вы можете использовать ISO-код с свойством content. Я часто использую это для: после или: перед псевдоселекторами.

Код содержимого \00d7.

Пример

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

Затем вы можете стилизовать и позиционировать псевдоселектор любым способом. Надеюсь, это поможет кому-то:).

Ответ 3

Вот несколько вариантов для вас с несколькими размерами и анимацией наведения. демо (ссылка)

enter image description here

<ul>
  <li>Large</li>
  <li>Medium</li>
  <li>Small</li>
  <li>Switch</li>
</ul>

<ul>
  <li class="ele">
    <div class="x large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large"><b></b><b></b><b></b><b></b></div>
    <div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop large"><b></b><b></b><b></b><b></b></div>
    <div class="x t large"><b></b><b></b><b></b><b></b></div>
    <div class="x shift large"><b></b><b></b><b></b><b></b></div>
  </li>
  <li class="ele">
    <div class="x medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium"><b></b><b></b><b></b><b></b></div>
    <div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop medium"><b></b><b></b><b></b><b></b></div>
    <div class="x t medium"><b></b><b></b><b></b><b></b></div>
    <div class="x shift medium"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small"><b></b><b></b><b></b><b></b></div>
    <div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
    <div class="x flop small"><b></b><b></b><b></b><b></b></div>
    <div class="x t small"><b></b><b></b><b></b><b></b></div>
    <div class="x shift small"><b></b><b></b><b></b><b></b></div>
    <div class="x small grow"><b></b><b></b><b></b><b></b></div>

  </li>
  <li class="ele">
    <div class="x switch"><b></b><b></b><b></b><b></b></div>
  </li>
</ul>

CSS

.ele div.x {
-webkit-transition-duration:0.5s;
  transition-duration:0.5s;
}

.ele div.x.slow {
-webkit-transition-duration:1s;
  transition-duration:1s;
}

ul { list-style:none;float:left;display:block;width:100%; }
li { display:inline;width:25%;float:left; }
.ele { width:25%;display:inline; }
.x {
  float:left;
  position:relative;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#CCC;
  border-radius:2px;
  border:solid 2px #FFF;
  transition: all .3s ease-out;
  cursor:pointer;
}
.x.large { 
  width:30px;
  height:30px;
}

.x.medium {
  width:20px;
  height:20px;
}

.x.small {
  width:10px;
  height:10px;
}

.x.switch {
  width:15px;
  height:15px;
}
.x.grow {

}

.x.spin:hover{
  background:#BB3333;
  transform: rotate(180deg);
}
.x.flop:hover{
  background:#BB3333;
  transform: rotate(90deg);
}
.x.t:hover{
  background:#BB3333;
  transform: rotate(45deg);
}
.x.shift:hover{
  background:#BB3333;
}

.x b{
  display:block;
  position:absolute;
  height:0;
  width:0;
  padding:0;
  margin:0;
}
.x.small b {
  border:solid 5px rgba(255,255,255,0);
}
.x.medium b {
  border:solid 10px rgba(255,255,255,0);
}
.x.large b {
  border:solid 15px rgba(255,255,255,0);
}
.x.switch b {
  border:solid 10px rgba(255,255,255,0);
}

.x b:nth-child(1){
  border-top-color:#FFF;
  top:-2px;
}
.x b:nth-child(2){
  border-left-color:#FFF;
  left:-2px;
}
.x b:nth-child(3){
  border-bottom-color:#FFF;
  bottom:-2px;
}
.x b:nth-child(4){
  border-right-color:#FFF;
  right:-2px;
}

Ответ 4

Попробуйте этот крест в CSS

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}
<a href="#" class="close">

Ответ 5

Вы можете использовать svg.

<svg viewPort="0 0 12 12" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
    <line x1="1" y1="11" 
          x2="11" y2="1" 
          stroke="black" 
          stroke-width="2"/>
    <line x1="1" y1="1" 
          x2="11" y2="11" 
          stroke="black" 
          stroke-width="2"/>
</svg>