it-swarm.com.ru

CSS - показывать только угловую границу

Мне интересно, возможно ли в CSS или Jquery сделать рамку, но только для угла. Что-то вроде этого: 

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****
34
pierreaurelemartin

Я бы использовал перекрывающиеся div.

Один с квадратными углами. А другой с закругленным углом (чтобы он не скрывал углы первого).

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

Результат:

enter image description here


Усовершенствованное решение, предоставляемое @ web-tiki:

http://jsfiddle.net/webtiki/y3EfP/147/

37
Majid Laissi

Предполагая, что <div id="content">CONTENT</div> и что CONTENT включает хотя бы один узел HTML.

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

Вот это Fiddle

33
Niet the Dark Absol

SVG

Это еще одна отличная альтернатива, если вы хотите начать использовать векторы, чтобы обеспечить большую отзывчивость.

<svg viewBox="0 0 100 100" width="50px">
  <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />
  <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />
  <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />
  <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" />
</svg>

SVG - отличный инструмент для использования. Некоторые из преимуществ использования SVG в этом случае:

  • Кривая управления
  • Контроль заливки (непрозрачность, цвет)
  • Контроль инсульта (ширина, непрозрачность, цвет)
  • Количество кода
  • Время строить и поддерживать форму
  • Масштабируемость
  • Нет HTTP-запроса (если используется встроенный, как в примере)

Поддержка браузера для встроенного SVG восходит к Internet Explorer 9. См. canIuse для получения дополнительной информации.

15
Stewartside

Вот несколько способов создать этот эффект без использования дополнительных псевдо/реальных элементов. Следует отметить, что оба эти подхода будут работать только в современных браузерах, поскольку они используют свойства CSS3. 

Использованиеborder-image: свойство border-image позволяет довольно легко создавать такие эффекты. Подход заключается в следующем:

  • Создайте прозрачное изображение, которое имеет границы только в углу, как здесь .
  • Установите это изображение как border-image-source и позвольте браузеру позаботиться обо всем остальном :) Так как значение по умолчанию для border-image-repeat - stretch, браузер растянет исходное изображение, чтобы оно соответствовало контейнеру, даже если контейнер станет большим.
  • Значение, установленное для свойства border-image-width, определяет толщину границ.

.bordered {
  background-color: beige;
  border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
  border-image-slice: 1;
  border-image-width: 5px;
}
.square {
  height: 150px;
  width: 150px;
}
.large-square {
  height: 350px;
  width: 350px;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}
<div class='bordered square'></div>
<div class='bordered large-square'></div>

Преимущества:

  • Не нуждается в дополнительных элементах (псевдо или вещественных), что означает меньше загроможденной разметки, псевдоэлементы могут использоваться для других нужд.
  • Разумно отзывчивый. То есть браузер будет адаптировать границы, даже если размеры контейнера изменятся.

Недостатки:

  • Относительно более низкая поддержка браузера . Если требуется поддержка IE10, то это не нужно.
  • Поскольку изображение границы растягивается, если холст исходного изображения представляет собой квадрат, а контейнер представляет собой прямоугольник, то границы будут выглядеть шире сверху и снизу, чем слева и справа.

    .bordered {
      background-color: beige;
      border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
      border-image-slice: 2;
      border-image-width: 5px;
    }
    .small-square {
      height: 75px;
      width: 75px;
    }
    .square {
      height: 150px;
      width: 150px;
    }
    .large-square {
      height: 350px;
      width: 350px;
    }
    .rectangle {
      height: 150px;
      width: 250px;
    }
    .large-rectangle {
      height: 150px;
      width: 350px;
    }
    
    /* Just for demo */
    
    div {
      margin-bottom: 10px;
    }
    <div class='bordered small-square'></div>
    <div class='bordered square'></div>
    <div class='bordered large-square'></div>
    <div class='bordered rectangle'></div>
    <div class='bordered large-rectangle'></div>


Использованиеbackground-image: Свойство background-image также можно использовать с изображениями linear-gradient для создания эффекта. Подход заключается в следующем:

  • Создайте четыре изображения linear-gradient (два сверху, снизу и два слева, справа). Эти градиенты будут начинаться с требуемого цвета и продолжат быть таким же цветом для всех пикселей, как ширина/высота изображения границы. После этого оно должно быть прозрачным. 
  • Для верхней и нижней границ направление градиента должно быть to right. Для левой и правой границ это должно быть to bottom.
  • Значение background-size определяет толщину границы. Для верхней и нижней границ размер градиентного изображения будет 100% по оси X и 5 пикселей (толщина) по оси Y. Для левой и правой границ размер будет 5 пикселей (толщина) по оси X и 100% по оси Y.
  • Для background-repeat должно быть установлено repeat-x для верхней, нижней границ и repeat-y для левой и правой границ.
  • background-position устанавливается (-1 * половина размера цвета в градиенте) по оси X или Y в зависимости от ситуации. Это сделано для того, чтобы половина цветной области появилась на одной стороне элемента, а другая половина - на другой (потому что градиент повторяется).

.bordered.square {
  height: 150px;
  width: 150px;
}
.bordered.rectangle {
  height: 150px;
  width: 250px;
}
.bordered {
  background-color: beige;
  background-image: linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
  background-position: -15px 0%, -15px 100%, 0% -15px, 100% -15px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}
<div class='bordered square'></div>
<div class='bordered rectangle'></div>

Преимущества:

  • Не нуждается в дополнительных элементах (псевдо или вещественных), что означает меньше загроможденной разметки, псевдоэлементы могут использоваться для других нужд.
  • Является разумно отзывчивым, так как ширина цвета в градиенте фиксирована. Если ширину штрихов границ необходимо изменить в соответствии с размерами контейнера, мы можем изменить значение пикселей в градиенте в процентах (с еще несколькими незначительными изменениями), как показано ниже.

    .bordered.square {
      height: 150px;
      width: 150px;
    }
    .bordered.large-square {
      height: 250px;
      width: 250px;
    }
    .bordered {
      background-color: beige;
      background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%);
      background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%;
      background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%;
      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    }
    
    /* Just for demo */
    
    div {
      margin-bottom: 10px;
    }
    <div class='bordered square'></div>
    <div class='bordered large-square'></div>

Недостатки:

  • Относительно лучшая поддержка браузера . Если необходима поддержка IE9, то это не нужно.
  • Если используется процентный градиент, то тот же недостаток с прямоугольниками, как упомянуто для border-image, будет применим и здесь.
13
Harry

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

HTML

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

CSS

.corners {
  position: relative;
  width: 100px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
}

.right {
  right: 0;
  border-right: 1px solid;
}
11
Neil

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

div {
  width: 100px;
  height: 100px;
  margin: 20px;

  background:
    linear-gradient(to right, black 4px, transparent 4px) 0 0,
    linear-gradient(to right, black 4px, transparent 4px) 0 100%,
    linear-gradient(to left, black 4px, transparent 4px) 100% 0,
    linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
    linear-gradient(to top, black 4px, transparent 4px) 0 100%,
    linear-gradient(to top, black 4px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
}
<div></div>

6
Robert Kirsz

клип путь

Используя два div друг на друга.
И добавление пути к клипу в div, чтобы сзади вы могли создать эффект, подобный рамке.

.wrapper {
  display: inline-block;
  background-color: black;
  line-height: 0px;
  -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%);
    clip-path: polygon(0% 100%, 
                             30% 100%, 
                             30% 70%, 
                             70% 70%, 
                             70% 100%, 
                             100% 100%, 
                             100% 70%, 
                             70% 70%,
                             70% 30%,
                             100% 30%,
                             100% 0%,
                             70% 0%,
                             70% 30%,
                             30% 30%,
                             30% 0%,
                             0% 0%,
                             0% 30%,
                             30% 30%,
                             30% 70%,
                             0% 70%);
}
.wrapper {} .wrapper div {
  display: inline-block;
  height: 150px;
  width: 150px;
  margin: 10px;
  background-color: white;
}
<div class="wrapper">
  <div></div>
</div>

два псевдоэлемента

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

.cut-border {
  position: relative;
  display: inline-block;
  border: 5px solid black;
  width: 150px;
  height: 150px;
}
.cut-border::before {
  content: "";
  position: absolute;
  height: calc(100% + 10px);
  width: 50%;
  background-color: white;
  top: -5px;
  left: 25%;
}
.cut-border::after {
  content: "";
  position: absolute;
  height: 50%;
  width: calc(100% + 10px);
  background-color: white;
  top: 25%;
  left: -5px;
}
<div class="cut-border"></div>

5
Persijn

Я нашел этот вопрос, но я не был удовлетворен подходом с радиусом границы: поскольку я использовал более толстые границы, эффект был не таким хорошим, как я хотел. Мне удалось создать другое решение, без изображений и без дополнительной разметки:

    .box {
        /* fake border */
        position: relative;
        overflow: hidden;
        box-shadow: inset 0px 0px 0px 10px green;
        padding: 1em;
    }

    .box:before {
        /* this element will hide the fake border on the top and bottom */
        content:'';         
        display: block;
        position: absolute;
        border-top:10px solid white;
        border-bottom:10px solid white;
        /* height = border-width x2 */
        height:calc(100% - 20px); 
        top:0;
        /* width = size of fake-border x2 */
        width: calc(100% - 36px);
        /* left = size of fake-border */
        left:18px;
    }

    .box:after {
        /* this element will hide the fake border on the left and right */
        /* the rules for width, heigth, top and left will be the opposite of the former element */
        display: block;
        position: absolute;
        content:'';
        border-right:10px solid white;
        border-left:10px solid white;
        height:calc(100% - 36px);
        width: calc(100% - 20px);
        top:18px;
        left: 0;
    }

Вот JSFiddle с этим примером: https://jsfiddle.net/t6dbmq3e/ Надеюсь, это поможет.

3
Raphael Aleixo

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

<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>

<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>

И, кажется, работает ;-) Извините за беспокойство и спасибо за вашу помощь.

1
pierreaurelemartin

Не существует чистого способа CSS, чтобы просто дать углам границу, но вы можете попытаться воспроизвести эффект. Возможно, что-то вроде этого: http://jsfiddle.net/RLG4z/

<div id="corners">
  <div id="content">
    content
  </div>
</div>

#corners {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    margin: 10px;
}
#content {
  background-color: white;
  border-radius: 15px;
  height: 30px;
  padding: 10px;
}

из-за разницы в радиусе границы, цвет фона нижележащего элемента div показывает впадину, создавая эффект границы по углам.

Лично я думаю, что я бы работал с фоновыми изображениями, чтобы добиться этого, чтобы лучше контролировать результат.

1
Pevara

Это твоя картинка: 

HTML:

<div class="Shell">

    <div class="top">

        <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

    </div>

    <div class="content">
        <p>CONTENT</p>
    </div>

    <div class="bottom">

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

      <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>
    </div>

и CSS:

.Shell { width: 200px;}
.left{ float:left; }
.right{float:right; }
.clear { clear: both; line-height: 10px; }
.content { line-height: 10px; text-align: center; }
1
Панайот Толев

Вот то, что я недавно сделал с контентом, центрированным как по вертикали, так и по горизонтали. 

HTML 

<div class="column">
  <div class="c-frame-wrapper">
    <div class="c-frame-tl"></div>
    <div class="c-frame-tr"></div>
    <div class="c-frame-br"></div>
    <div class="c-frame-bl"></div>
    <div class="c-frame-content">
        &copy; Copyright 2015 - Company name<br /><br />
        St Winifrids St,<br />
        The Saints, Harrogate HG1 5PZ, UK<br />
    </div>
  </div>
</div>

CSS

.c-frame-wrapper {
  width: 250px;
  height: 100px;
  font-size:11px;
  color: $dark-grey-lighten-70;
  /* center align x axis */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-frame-tl {
  top: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid none none solid;
  border-color: #eb0000;
}

.c-frame-tr {
  top: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid solid none none;
  border-color: #eb0000;
}

.c-frame-br {
  bottom: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: #eb0000;
}

.c-frame-bl {
  bottom: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none none solid solid;
  border-color: #eb0000;
}

.c-frame-content {
  width:100%;
  text-align: center;
  /*center alignment x and y*/
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%,-50%); 
}

JSFiddle

1
amjgbr

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

http://jsfiddle.net/3jo5btxd/

HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}
1
zeros-and-ones

я думаю, что лучшим решением является метод псевдоэлемента. Хороший и чистый и не загрязняет HTML с (слишком много) дополнительных элементов.

Я создал этот sass mixin, используя код выше, для решения копирования и вставки:

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

Тогда вы можете использовать это так:

hTML:

<div class="border">
    <div class="content">
        Content
    </div>
</div>

SCSS

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

Вам нужен z-index и относительная позиция, чтобы содержимое располагалось поверх псевдоэлементов.

Я сделал демонстрацию codepen здесь: http://codepen.io/timrross/pen/XMwVbV

0
Tim