CODEWITHSUNDEEP
cssborder
niao
niao

Reputation: 5070

css border-left 50% height

I want the left border of my div to show only to the half of the div. The same I would like to do to my right border but is should be set from the bottom of the div to the middle of the div. How can I achieve it?

Upvotes: 45

Views: 113063

Answers (6)

Nor.Z
Nor.Z

Reputation: 1349

besides from using ::after, as other answer posts shown

solution

use background
+ linear-gradient (img)
+ position & size the linear-gradient (img)

.alpha {
  background: linear-gradient(180deg, rgba(200, 200, 200, 0.5) 0%, rgba(40, 40, 40, 0.5) 50%, rgba(200, 200, 200, 0.5) 100%) 0 50% / 5px 60% no-repeat;
  /* 
  linear-gradient(180deg, 
    rgba(200, 200, 200, 0.5) 0%, 
    rgba(40, 40, 40, 0.5) 50%, 
    rgba(200, 200, 200, 0.5) 100%) 
  - from top to bottom, 
    starts at position 0% with light grey 
    and middle stops at position 50% with dark grey 
    and ends at position 100% with light grey
  0 50% / 5px 60%
  - position start from left 0, from top 50%
  - size with 5px width, 60% height
  no-repeat
  - so that the img (linear-gradient) doesnt repeat to fill out the background 
    -- so that the position & size works
  */
  padding: 0 0 0 1em;
}
<div class="alpha">aaaa<br>aaaa<br>aaaa<br>aaaa</div>

solution 2

or use ::before / ::after with inline-block

(you need to convert the jsx style to css..)

        '&::before': {
          // display: 'inline', // must, or use relative // empty space content can but cannot percentage height?...
          content: '" "',
          display: 'inline-block',
          verticalAlign: 'middle',
          height: '0.8em',
          borderLeft: '1px solid #0000CC',
          padding: '0 0.8em 0 0',
        },

related

How to create linear gradient only on left border and normal border for other 3 sides with content? (good resource)

Border left gradient

Upvotes: 0

Jacob
Jacob

Reputation: 171

For those trying to implement Aleksandr Belugin's answer above using border-left, here it is:

.mybox {
  position: relative;
  padding: 10px 20px;
  background-color: #EEEEEE;
}

.mybox:after {
  content: '';
  position: absolute;
  left: 0px;
  top: 25%;
  height: 50%;
  border-left: 1px solid #0000CC;
}
<div class="mybox">
  Le content de box.
</div>

Upvotes: 17

indextwo
indextwo

Reputation: 5935

A sort-of similar but different approach to @Pekka's: use the :after pseudo-selector, like so:

.mybox {
  position: relative;
  padding: 10px 20px;
  background-color: #EEEEEE;
}

.mybox:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 25%;
  width: 50%;
  border-bottom: 1px solid #0000CC;
}
<div class="mybox">
  Le content de box.
</div>

...and a jsFiddle for good measure.

Upvotes: 63

l2aelba
l2aelba

Reputation: 22167

2018: For modern browsers:

You can use border-image with gradients something like...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%);
border-image-slice: 1;

enter image description here

Demo: https://jsfiddle.net/hz8wp0L0/

Tool: Gradient Editor

Can I Use : border-image (IE11)

Upvotes: 21

Natan Graaf
Natan Graaf

Reputation: 49

You can use:

line-height:50%; /*(or less, much less)*/
overflow:visible;

The text is visible, but the border color will be only at half of the div size.

Upvotes: 4

Pekka
Pekka

Reputation: 449475

Good question. It's not possible using the border property.

The only thing that comes to mind, if you can set your div's position to relative, is to use an absolutely positioned, 1 pixel wide div. Not thoroughly tested but this should work:

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
            background-color: blue; overflow: hidden'>
 &nbsp;
</div>

You'd do the same on the right hand side, replacing the left property by right.

Remember, the surrounding div needs to be position: relative for this to work. I'm not sure about whether the 50% height setting will work consistently throughout browsers - make sure you test it. You may have to resort to pixel measures if it doesn't.

Upvotes: 20

Related Questions