Создать div как изображение

Question

Я хочу знать, можно ли создать div в html и css в качестве изображения, если это возможно, как это сделать?

У меня есть это: http://jsbin.com/kokuc/1/edit

Я могу установить размер каждой из сторон? поэтому мы можем сделать большую обратную сторону

Answer 1

В эту эпоху вы не сможете получить этот тип границы (пикселированный) на элементе.

Таким образом, идеальным способом сделать такую ​​вещь было бы использование фонового изображения для div.

div { 
    background-image: url('../link/to/image.png'); 
} 

Почему? Поскольку этот тип 8-битных границ и выходных данных устарел сейчас. Никакая ОС или веб-браузер не позволят вам делать это по умолчанию, и с помощью CSS это будет очень сложно, если вы даже сможете это сделать. Таким образом, оставляя возможность использовать background-image, чтобы установить такую ​​границу и все остальное.

Answer 2

Да, это довольно просто.

Вы можете использовать изображение в css background. Используйте этот код в качестве примера:

background: url(http://i.imgur.com/pGzLkoF.png); 

Вам необходимо изменить размер div, чтобы он соответствовал изображению. Вы также можете сохранить изображение в каталоге файлов, затем поместите путь к файлу внутри url() вместо URL-адреса, который вы опубликовали.

Answer 3

Как уже упоминалось выше; пиксельные углы должны быть из фонового изображения.

Но цвета и закругленные углы могут быть, конечно, чистым веб-кодом.

Примечание: не является точным. Но вы можете легко добраться туда.

#cooldiv { 
    border:2px solid #a1a1a1; 
    padding:10px 40px; 
    background-image: url('transparent.png'); 
    width:300px; 
    border-radius:25px; 
} 

Answer 4

Ну ... Это возможно с чистым CSS, но я не хотел бы предложить это, так как это не очень практично.

Лучшим вариантом, как указано, было бы использование background-image. Если вам нужно somethign, чтобы быть отзывчивым на каждом размере и хотите иметь некоторую гибкость, я бы предложил изображение SVG (масштабируемая векторная графика), потому что это можно настроить на любой размер экрана. SVG также имеет IE8 < = что должно быть чем-то, что нужно учитывать.

Вот как я достиг этого,

HTML:

<div class="frame"> 
    <div class="frame-1"> 
     <div class="top-1"></div> 
     <div class="middle-1"></div> 
     <div class="bottom-1"></div> 
    </div> 
    <div class="frame-2"> 
     <div class="top-2"></div> 
     <div class="middle-2"></div> 
     <div class="bottom-2"></div> 
    </div> 
    <div class="frame-3"> 
     <div class="top-3"></div> 
     <div class="middle-3"></div> 
     <div class="bottom-3"></div> 
    </div> 
    <p>Here is some text or whatever that will go in this abomination.</p> 
</div> 

CSS:

.frame { 
    width: 600px; 
    margin: 0 auto; 
    position: relative; 
} 

.frame p { 
    position: absolute; 
    display: block; 
    width: 80%; 
    height: 80%; 
    left: 10%; 
    margin-top: 10%; 
    text-align: center; 
} 

.frame-1 { 
    width: 600px; 
    position: absolute; 
} 

.top-1, .middle-1, .bottom-1 { 
    background: black; 
    position: absolute; 
} 

.top-1 { 
    width: 90%; 
    height: 300px; 
    left: 5%; 
} 

.middle-1 { 
    width: 96%; 
    height: 280px; 
    top: 10px; 
    left: 2%; 
} 

.bottom-1 { 
    width: 100%; 
    height: 260px; 
    top: 20px; 
} 

.frame-2 { 
    width: 570px; 
    position: absolute; 
    top: 15px; 
    left: 15px; 
} 

.top-2, .middle-2, .bottom-2 { 
    background: rgb(46, 170, 228); 
    position: absolute; 
} 

.top-2 { 
    width: 90%; 
    height: 270px; 
    left: 5%; 
} 

.middle-2 { 
    width: 96%; 
    height: 250px; 
    top: 10px; 
    left: 2%; 
} 

.bottom-2 { 
    width: 100%; 
    height: 230px; 
    top: 20px; 
} 

.frame-3 { 
    width: 540px; 
    position: absolute; 
    top: 30px; 
    left: 30px; 
} 

.top-3, .middle-3, .bottom-3 { 
    background: rgb(147, 200, 235); 
    position: absolute; 
} 

.top-3 { 
    width: 90%; 
    height: 240px; 
    left: 5%; 
} 

.middle-3 { 
    width: 96%; 
    height: 220px; 
    top: 10px; 
    left: 2%; 
} 

.bottom-3 { 
    width: 100%; 
    height: 200px; 
    top: 20px; 
} 

Наконец, скрипку: Demo

Fiddle с тенью не совсем даже : Demo