CODEWITHSUNDEEP
htmlcss
Adrian Syn Rusnac
Adrian Syn Rusnac

Reputation: 155

Border-bottom and border-image issues

I'm having some issues with border-bottom and border-image.As I understand it I can set an image for my border , in this case I want the image to be :

enter image description here

However I do not get the image and it just stays a normal 3px border with the color I've specified.And it seems that the image is not taken into consideration.

Can anyone point me to the right direction(Check bootply):

http://www.bootply.com/G5LTvI8YR9

Upvotes: 3

Views: 136

Answers (3)

amol
amol

Reputation: 1555

You can do it through css only without using any image

Demo

ul.nav a:hover {
    position: relative;
    border-bottom: 4px solid #f39385;
}

ul.nav a:hover:after, ul.nav a:hover:before {
    bottom: 0px;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

ul.nav a:hover:after {
    border-color: rgba(243, 147, 133, 0);
    border-bottom-color: #f39385;
    border-width: 3px;
    margin-left: -3px;
}

ul.nav a:hover:before {
    border-bottom-color: #f39385;
    border-width: -6px;
    margin-left: -6px;
    border-color: rgba(243, 147, 133, 0);
}

Upvotes: 3

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a FIDDLE if you are interested in CSS solution.

<span class="border"></span>

.border {
  position: relative;
  display: block;
  width: 70px;
  background: #f0745f;
  border: 4px solid #f0745f;
}
.border:before,
.border:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.border:before {
  border-color: transparent;
  border-bottom-color: #f0745f;
  border-width: 10px;
  margin-left: -10px;
}
.border:after {
  border-color: transparent;
  border-bottom-color: #f0745f;
  border-width: 4px;
  margin-left: -4px;
}

Upvotes: 0

web-tiki
web-tiki

Reputation: 103780

In your case, using a background image on hover state is much simpler than using an image for the border.

I made up this example based on you bootply that should show what you are looking for (The background image is the one you posted, you might need to tweak it and remove unused white parts on the left and right of it so that the triangle is centered) :

DEMO

CSS :

a:hover {
    color: #f39385!important;
    background: url(https://i.sstatic.net/fIzS3.png) right bottom no-repeat;}
a {
    text-transform: uppercase;
    color: #b9b9b9;
    font-size: 11px;
    padding-bottom: 30px;
    width:112px;
    display:inline-block;
    text-align:center;
}

Upvotes: 2

Related Questions