Добавление границы в Div с верхним треугольником

Я пытаюсь добавить рамку к Div с верхним треугольникомДобавление границы в Div с верхним треугольником

вопрос границы не получает прикладывается к треугольной части

body { 
 
    background-color: #F3F5F6; 
 
} 
 
.info-panel { 
 
    display: block; 
 
    position: relative; 
 
    background: #FFFFFF; 
 
    padding: 15px; 
 
    border: 1px solid #DDDDDD; 
 
    margin-top: 20px; 
 
} 
 
.info-panel:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 10px solid #FFFFFF; 
 
    border-top: 10px solid transparent; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
}

<div class="info-panel"> 
 
    Testing 
 
</div>

Я не хочу добавлять тень окна css.

Мне нужна граница.

jsFiddle

источник

2016-11-09 Jordyn

На самом деле «треугольник часть» является самой границей, поэтому вы не можете применить границу CSS к нему , Однако есть обходной путь.

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

.info-panel { 
 
    display: block; 
 
    position: relative; 
 
    background: #FFFFFF; 
 
    padding: 15px; 
 
    border: 1px solid #DDDDDD; 
 
    margin-top: 20px; 
 
} 
 
.info-panel:before, .info-panel:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.info-panel:before { 
 
    left: 19px; 
 
    border: 11px solid transparent; 
 
    border-bottom-color: #ddd; 
 
} 
 
.info-panel:after { 
 
    left: 20px; 
 
    border: 10px solid transparent; 
 
    border-bottom-color: #fff; 
 
}

<div class="info-panel"> 
 
    Testing 
 
</div>

источник

2016-11-09 18:06:47 5aledmaged

спасибо много работает как шарм. – Jordyn

Просто снять этот

.info-panel:after { 
    border-bottom-color: #FFFFFF; 
}

Он переопределяет границу зеленый на нем.

проверить этот фрагмент

.info-panel { 
 
    display: block; 
 
    position: relative; 
 
    background: #FFFFFF; 
 
    padding: 15px; 
 
    border: 1px solid #DDDDDD; 
 
    margin-top: 20px; 
 
} 
 
.info-panel:before { 
 
    border: 1px solid #DDDDDD; 
 
} 
 
.info-panel:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 20px; 
 
    bottom: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 10px solid green; 
 
    border-top: 10px solid transparent; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
}

<div class="info-panel"> 
 
    Testing 
 
</div>

Надеется, что это помогает

источник

2016-11-09 18:02:23 Geeky

я сожалею, что была моя ошибка, но то, что я действительно хочу, моя серая граница идти вокруг треугольника так же, как и в других частях – Jordyn

Вы можете добиться того, что с fontAwesome. Смотрите мой пример и корректировать по мере необходимости

.info-panel { 
 
    \t display: block; 
 
    \t position: relative; 
 
    \t background: #FFFFFF; 
 
    \t padding: 15px; 
 
    \t border:1px solid #DDDDDD; 
 
    \t margin-top:20px; 
 
    } 
 
    
 
    .info-panel:after, .info-panel:before { 
 
    \t content: '\f0d8'; 
 
     font-family: fontAwesome; 
 
    \t display: block; 
 
    \t position: absolute; 
 
     font-size: 36px; 
 
    \t left: 20px; 
 
    \t bottom: 100%; 
 
     top: -22px; 
 
    \t width: 0; 
 
    \t height: 0; 
 
     color: #ccc; /* should be your desired border color */ 
 
    
 
    } 
 
    
 
    .info-panel:before { 
 
    color: white; 
 
    z-index: 2; 
 
    top: -21px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="info-panel"> 
 
    Testing 
 
</div>

источник

2016-11-09 18:09:14

Добавление границы в Div с верхним треугольником

ответ

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