Как сделать часы дизайнера

Question

Хотите сделать час, как этот img1

и

Img2

не знал, как этого добиться.

Answer 1

Я уверен, что использование <hr> является не Рекомендуемый способ сделать это. Вы можете просто попробовать:

<div><img src='http://i.stack.imgur.com/Llk2U.png'><div> 

Или использовать css класс, чтобы сделать его немного более элегантна:

.whybuyfromus 
 
{ 
 
    background: url('http://i.stack.imgur.com/Llk2U.png') no-repeat; 
 
    height: 101px; 
 
    background-size: contain; 
 
} 
 

<div class="whybuyfromus" />

Answer 2

попробовать это одно:

.hr { 
 
    background-image: url(http://i.stack.imgur.com/Llk2U.png); 
 
    height: 100px; 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    }

<div class="hr" />

Answer 3

Я знаю, что у этого уже есть принятый ответ, но я хотел посмотреть, можно ли сделать полностью отзывчивую версию с CSS. Я нашел решение, используя Flexbox:

.fancy-hr { 
 
    display: flex; 
 
    background-image: 
 
    url(http://i.imgur.com/ZmheWg5.png), 
 
    url(http://i.imgur.com/ph3e3OT.png); 
 
    background-size: 115px 100%; 
 
    background-position: 0 0, 100% 0; 
 
    background-repeat: no-repeat; 
 
    height: 37px; 
 
    box-sizing: border-box; 
 
    padding: 0 115px; 
 
} 
 

 
.fancy-hr:before, 
 
.fancy-hr:after { 
 
    content: ""; 
 
    flex: 1; 
 
    background: url(http://i.imgur.com/NBus6Hr.png) repeat-x; 
 
} 
 

 
.fancy-hr span { 
 
    display: inline-block; 
 
    height: 100%; 
 
    line-height: 37px; 
 
} 
 

 
.fancy-hr span:before, 
 
.fancy-hr span:after { 
 
    content: ""; 
 
    width: 10px; 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 

 
.fancy-hr span:before { 
 
    background-image: url(http://i.imgur.com/wMU1oDn.png); 
 
    float: left; 
 
} 
 

 
.fancy-hr span:after { 
 
    background-image: url(http://i.imgur.com/4Q2el3J.png); 
 
    float: right; 
 
}

<div class="fancy-hr"><span>Text here</span></div>