2

Basically i wanted to make a div where the right and left borders are fading. So the top right and bottom right of the border must be almost gone and the middle right of the border must be completely white. Its hard to explain but better to see with a picture.

https://gyazo.com/5d5c29c6406ebdf5681341728b6908b4

This is basically what i want to make but what i am getting now is this:

https://gyazo.com/f4cecd5ba3c59b9a7001272d229a3de9

I have googled a lot of different ways to try to find someone with a similar problem. People keep saying putting gradient on the border isn't as good as putting gradient on backgrounds but i'm not very familiar with gradients so i basically don't really know what i'm doing.

Now the way ive made the first picture was without bootstrap-grid but i want the gradient borders to also work with bootstrap-grid so i tried to remake it but yeah, stuff isn't always as easy as you think.

This is my first stackoverflow post by the way so i'm sorry if its not fully as it should be or i did something wrong.

The html:

<div class="row row2 justify-content-center">
 <div class="col-md-4 outerInterest align-content-end"><span>
<a href="">Test Left Side</a></span></div>
 <div class="col-md-3 innerInterest align-self-center"><span>
<a href="">Test Middle block</a></span></div>
 <div class="col-md-4 outerInterest align-content-start"><span>
<a href="">Test Right Block</a></span></div>
</div>

The scss:

 $primary: #3376aa;
 $lightblue: lightblue;
 $white: white;

.row2{
  text-align: center;
  background-color: $primary;
  border: solid 1px $lightblue;

  .outerInterest, .innerInterest{
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .innerInterest{
    border: solid 1px $white;
    border-image: linear-gradient
(to top, $white, rgba(0, 0, 0, 0)) 1 100%;
    }

  span{
    color: white;
  }
  span:hover{
    opacity: .4;
    transition: all 0.3s ease-out;
  }

  a{
    text-decoration: none;
    color: $white;
  }
}

What i expected was to be able to change this line:

border-image: linear-gradient
(to top, $white, rgba(0, 0, 0, 0)) 1 100%;

To this:

border-image: linear-gradient
(to center, $white, rgba(0, 0, 0, 0)) 1 100%;

But as i figured out it wasn't that easy.

uteh
  • 41
  • 7
  • Update: I've tried to fix this is a lot of ways now, ive tried to add a vertical ruler class with col-md-1 in there but i couldnt get it centered. I've tried gradient pickers, none worked. I've tried to use the image of how i wanted it to be as background-image, this didnt work responsively. Right now the border-gradient i had way at the start before trying all this was better. Right now i'm thinking i should just not do this part with bootstrap if i don't get an awnser. (even though the site would be less responsive this way). – uteh Sep 27 '19 at 11:07

0 Answers0