CODEWITHSUNDEEP
htmlcss
smarttechy
smarttechy

Reputation: 902

How to make hr designer

Want to make hr like this img1

enter image description here and

img2

enter image description here

don't known how to achieve this.

Upvotes: 0

Views: 96

Answers (3)

Noah
Noah

Reputation: 1429

I know that this already has an accepted answer but I wanted to see if it was possible to make a fully responsive version with CSS. I found a solution using 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>

Upvotes: 1

Mahendra Kulkarni
Mahendra Kulkarni

Reputation: 1507

try this one:

  .hr {
    background-image: url(https://i.sstatic.net/Llk2U.png);
    height: 100px;
    background-repeat: no-repeat;
    background-size: 100%;
  }
<div class="hr" />

Upvotes: 0

Alastair Brown
Alastair Brown

Reputation: 1616

I'm pretty sure that using an <hr> is not the recommended way to do that. You could just try:

<div><img src='https://i.sstatic.net/Llk2U.png'><div>

Or use a css class to make it a bit more elegant:

.whybuyfromus
{
  background: url('https://i.sstatic.net/Llk2U.png') no-repeat;
  height: 101px;
  background-size: contain;
}
  
<div class="whybuyfromus" />

Upvotes: 5

Related Questions