W jakiś sposób ograniczyć długość granicy?

Czy istnieje sposób na ograniczenie długości granicy? Mam <div>ramkę z dolną ramką, ale chcę dodać ramkę po lewej stronie, <div>która rozciąga się tylko w połowie wysokości.

Czy można to zrobić bez dodawania dodatkowych elementów na stronie?

Mam nadzieję że to pomoże:

#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>

Treści generowane przez CSS mogą rozwiązać ten problem:

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;
}

<div>Lorem Ipsum</div>

(uwaga - content: "";deklaracja jest niezbędna do renderowania pseudoelementu)

Te :afterskały :)

Jeśli grasz trochę, możesz nawet ustawić element granicy o zmienionym rozmiarze, aby był wyśrodkowany lub pojawiał się tylko wtedy, gdy obok niego znajduje się inny element (jak w menu). Oto przykład z menu:

#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>

Dzięki właściwościom CSS możemy kontrolować tylko grubość obramowania; nie długość.

Możemy jednak naśladować efekt graniczny i kontrolować go, widtha także heightw inny sposób.

Z CSS (gradient liniowy):

Możemy użyć linear-gradient()do stworzenia obrazu tła i kontrolować jego rozmiar i położenie za pomocą CSS, aby wyglądał jak obramowanie. Ponieważ możemy zastosować wiele obrazów tła do elementu, możemy użyć tej funkcji, aby utworzyć wiele obrazów podobnych do ramek i zastosować na różnych stronach elementu. Możemy również pokryć pozostały dostępny obszar pewnym kolorem, gradientem lub obrazem tła.

Wymagany HTML:

Wszystko, czego potrzebujemy, to tylko jeden element (prawdopodobnie posiadający pewną klasę).

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

Kroki:

1. Utwórz obraz (y) w tle za pomocą linear-gradient().
2. Użyj, background-sizeaby dopasować width/ heightpowyżej utworzonych obrazów, aby wyglądały jak obramowanie.
3. Zastosowanie background-positiondo regulacji położenia (jak left, right, left bottometc.) z wyżej utworzonego granicznej (s).

Niezbędny 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;
}

Przykłady:

Dzięki linear-gradient()możemy tworzyć granice jednolitego koloru, a także mieć gradienty. Poniżej znajduje się kilka przykładów obramowania utworzonego tą metodą.

Przykład z ramką zastosowaną tylko z jednej strony:

.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>

Przykład z obrzeżem zastosowanym po obu stronach:

.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>

Przykład z obramowaniem zastosowanym ze wszystkich stron:

.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>

Zrzut ekranu:

dla linii poziomych możesz użyć znacznika hr:

hr { width: 90%; }

ale nie można ograniczyć wysokości granicy. tylko wysokość elementu.

Granice są definiowane tylko dla każdej strony, a nie ułamki strony. Nie możesz tego zrobić.

Ponadto nowy element również nie byłby granicą, naśladowałby tylko pożądane zachowanie - ale nadal byłby elementem.

Innym sposobem na to jest użycie obrazu obramowania w połączeniu z gradientem liniowym.

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/

Obsługa przeglądarki: IE: 11+

Chrome: wszystkie

Firefox: 15+

Aby uzyskać lepszą obsługę, dodaj także prefiksy dostawcy.

obraz granicy obramowania

To sztuczka CSS, a nie formalne rozwiązanie. Kod zostawiam z czarną kropką, ponieważ pomaga mi ustawić element. Następnie pokoloruj treść (kolor: biały) i (margines u góry: około -5px lub więcej), aby nie było okresu.

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}

Innym rozwiązaniem jest użycie obrazu tła do naśladowania wyglądu lewej ramki

1. Utwórz styl lewej krawędzi, którego potrzebujesz jako grafikę
2. Ustaw go po lewej stronie div (ustaw go na tyle, aby obsługiwał mniej więcej dwa powiększenia tekstu w starszych przeglądarkach)
3. Ustaw pozycję pionową 50% od góry div.

Być może trzeba będzie dostosować do IE (jak zwykle), ale warto spróbować, jeśli to jest projekt, którego szukasz.

• Generalnie jestem przeciwny używaniu obrazów do czegoś, co z natury zapewnia CSS, ale czasami, jeśli projekt tego potrzebuje, nie ma innej możliwości.

Możesz zdefiniować tylko jedną ramkę na stronę. Musisz do tego dodać dodatkowy element!