Хороший способ создать двустороннюю границу?

Вот что я имею в виду (с двумя разными цветами)Хороший способ создать двустороннюю границу?

enter image description here

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

HTML

<span class="border-right"></span> 
<span class="border-left"></span>

CSS

.border-right { border-right: 1px solid #eee } 
.border-left { border-left: 1px solid #888 }

Кто-нибудь знает лучший способ для достижения этой цели? Кроме того, высота черного фона div не имеет заданной высоты, поэтому как бы я удостоверился, что два элемента span подходят сверху вниз независимо от высоты?

источник

2014-12-27 J82

Простейшим решением было бы дать отдельную левую/правую границу с шириной пролета равной нулю.

span { 
 
    display: inline-block; vertical-align: middle; 
 
    line-height: 24px; height: 24px; 
 
} 
 
span.dbl { 
 
    border-left: 2px solid blue; 
 
    border-right: 2px solid red; 
 
    width: 0px; 
 
} 
 
div { background-color: #eee; }

<div> 
 
    <span>Something on left</span> 
 
    <span class="dbl"></span> 
 
    <span>Something on right</span> 
 
</div>

источник

2014-12-27 09:08:02 Abhitalks

@Downvoter: помочь объяснить? Является ли этот ответ неправильным? Разве это не полезно? – Abhitalks

Вы можете сделать это

border-right:2px double black;

источник

2014-12-27 09:01:59 Akshay

мне нужно две границ быть разными цветами. – J82

@ J82 http://codepen.io/anon/pen/WbGzyr изменить границу снизу до границы справа – Akshay

@ J82 извините неправильно косепен попробуйте новый, я отредактировал свой комментарий – Akshay

@Akshay и @abhitalks получил хорошие ответы, самый простой выход, делая так:

border-right: 10px solid blue; 
box-shadow: 10px 0 0 red;

Вот рабочая скрипка:

http://jsfiddle.net/off3f1gg/

источник

2014-12-27 09:05:08

да. хороший трюк. добавьте фрагмент к вашему ответу, чтобы он был легко продемонстрирован. – Abhitalks

вы также можете использовать pseudo элемент

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.first, 
 
.second { 
 
    width: 100px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
.first { 
 
    border-right: 2px solid red; 
 
    position: relative; 
 
} 
 
.first:after { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 100%; 
 
    top: 0; 
 
    width: 2px; 
 
    right: -4px; 
 
    background: yellow; 
 
}

<div class="first">test</div> 
 
<div class="second">test</div>

источник

2014-12-27 09:11:13

Хороший ответ :), кажется слишком длинным –

почему downvote? –

lol не я. Наверное, кто-то еще, мой? –

Привет вам попробовать этот код это поможет

<h2>Demo 1</h2> 
<div class="header"> 
    <div class="left-shide"></div> 
    <div class="right-shide"></div>  
</div> 

<h2>Demo 2</h2> 
<div class="header"> 
    <div class="left-shide2"></div> 
    <div class="right-shide2"></div>  
</div>

CSS

.header{ 
    height:50px; 
    width:100%; 
    background-color:rgb(15, 15, 15); 
    float:left; 
} 

.left-shide{ 
    float:left; 
    height:50px; 
    width:20%; 
    border-right:1px solid rgb(0,0,0); 
} 
.right-shide{ 
    float:left; 
    height:50px; 
    width:20%; 
    border-left:1px solid rgb(60,60,60); 
} 



/*Demo 2 **/ 
.left-shide2{ 
    float:left; 
    height:50px; 
    width:20%; 
    box-shadow:1px 0 1px rgba(0,0,0,1); 
} 
.right-shide2{ 
    float:left; 
    height:50px; 
    width:20%; 
    border-left:1px solid rgb(60,60,60); 
}

Живой Demo

источник

2014-12-27 09:16:55

Хороший способ создать двустороннюю границу?

ответ

Смежные вопросы