Любой способ ограничить длину границы?

есть ли способ ограничить длину границы. У меня есть <div> Это имеет нижнюю границу, но я хочу добавить границу слева от <div> это тянется только на половину пути вверх.



есть ли способ сделать это без добавления дополнительных элементов на странице?

627   10  

10 ответов:

надеюсь, это поможет:

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}
<div id="mainDiv">
  <div id="borderLeft"></div>
</div>
144  
2014-10-19 09:58:11

CSS сгенерированный контент может решить эту проблему для вас:

div {
  position: relative;
} 
/* Main div for border to extend to 50% from bottom left corner */
div:after {
  content:""; 
  background: black; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 50%; 
  width: 1px;
}

(Примечание-the content: ""; объявление необходимо для того, чтобы псевдо-элемент отображался)

207  
2017-01-13 23:19:00

The :after камни :)

если вы играете немного, вы даже можете настроить свой измененный элемент границы, чтобы он выглядел центрированным или появлялся только в том случае, если рядом с ним есть другой элемент (например, в меню). Вот пример с меню:

#menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li:after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}


#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li:after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}
<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>
29  
2014-12-20 01:47:44

для горизонтальных линий вы можете использовать тег hr:

hr { width: 90%; }

но его невозможно ограничить высоту границы. только высота элемента.

13  
2012-12-09 05:12:35

С помощью свойств CSS мы можем контролировать только толщину границы; не длину.

мы можем имитировать эффект границы и контролировать его width и height как мы хотим, с какими-то другими способами.

С CSS (линейный градиент):

можно использовать linear-gradient() чтобы создать фоновое изображение(Ы) и контролировать его размер и положение с помощью CSS, чтобы он выглядел как граница. Поскольку мы можем применить несколько фоновых изображений к элементу, мы можем использовать эта функция для создания нескольких границ, как изображения и применять на разных сторонах элемента. Мы также можем покрыть оставшуюся доступную область с некоторым сплошным цветом, градиентом или фоновым изображением.

требуется HTML:

все, что нам нужно, это только один элемент (возможно, имеющий какой-то класс).

<div class="box"></div>

действия:

  1. создать фоновое изображение(ы) с linear-gradient().
  2. использовать background-size для того чтобы отрегулировать width/height из выше созданных изображений, так что это выглядит как граница.
  3. использовать background-position для регулировки положения (например left,right,left bottom etc.) выше созданной границы(ов).

необходимый CSS:

.box {
  background-image: linear-gradient(purple, purple),
                    // Above css will create background image that looks like a border.
                    linear-gradient(steelblue, steelblue);
                    // This will create background image for the container.

  background-repeat: no-repeat;

  /* First sizing pair (4px 50%) will define the size of the border i.e border
     will be of having 4px width and 50% height. */
  /* 2nd pair will define the size of stretched background image. */
  background-size: 4px 50%, calc(100% - 4px) 100%;

  /* Similar to size, first pair will define the position of the border
     and 2nd one for the container background */
  background-position: left bottom, 4px 0;
}

примеры:

С linear-gradient() мы можем создавать границы сплошного цвета, а также иметь градиенты. Ниже приведены некоторые примеры границей с этим метод.

пример с границей применяется только с одной стороны:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

пример с границей, примененной с двух сторон:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

пример с границами со всех сторон:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}
<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

скриншоты:

Output Image showing half length borders

12  
2017-02-13 07:34:20

границы определяются только для одной стороны, а не в долях стороны. Так что, нет, ты не можешь этого сделать.

кроме того, новый элемент также не будет границей, он будет только имитировать поведение, которое вы хотите, но он все равно будет элементом.

8  
2010-11-09 10:00:40

это CSS трюк, а не формальное решение. Я оставляю код с черным периодом, потому что это помогает мне позиционировать элемент. После этого, цвет вашего контента (цвет:белый) и (margin-top:-5px или так), чтобы сделать его, как будто период не существует.

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}
4  
2015-11-25 07:21:02

другое решение - вы можете использовать фоновое изображение, чтобы имитировать внешний вид левой границы

  1. создайте левый стиль границы, который вам нужен как графический
  2. расположите его слева от вашего div (сделайте его достаточно длинным, чтобы обрабатывать примерно два увеличения размера текста для старых браузеров)
  3. установите вертикальное положение 50% от верхней части вашего div.

возможно, вам придется настроить IE (как обычно), но это стоит попробовать, если это дизайн вы собираетесь.

  • Я вообще против использования изображений для чего-то, что CSS по своей сути предоставляет, но иногда, если дизайн нуждается в этом, нет другого пути.
2  
2010-11-09 12:00:58

другой способ сделать это-использовать border-image в сочетании с линейным градиентом.

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}
<div></div>

jsfiddle: https://jsfiddle.net/u7zq0amc/1/

Поддержка Браузеров : Т. е.: 11+

хром: все

Firefox: 15+

для лучшей поддержки также добавить префиксы поставщиков.

caniuse border-image

2  
2017-05-06 17:07:45

вы можете определить только одну границу на стороне. Вам придется добавить дополнительный элемент для этого!

1  
2010-11-09 09:58:49

Comments

    Ничего не найдено.
Click here to cancel reply.