3 граничных дна для одного div?

Question

Есть ли способ создать 3 border-bottom s до одного div?

Вот что он должен выглядеть следующим образом:

Answer 1

Попробуйте http://codepen.io/anon/pen/ogzoQQ

<div id="box"></div> 

#box{ 
width:100px; 
height:100px; 
background:blue; 
box-shadow: 0px 3px green,0px 6px orange,0px 9px yellow; 
border-radius:5px; 
} 

Answer 2

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

.class { 
    border-radius: 5px 5px 5px 5px; 
    border-bottom: 3px double #BBBBBB; 
    box-shadow: 0px 3px 3px rgba(187,187,187, 1); 
} 

Answer 3

вы можете получить этот эффект, используя

border-bottom: 3px double #BBBBBB;" 

если вы хотите три линии, которые вы должны использовать три различную диву с

border-bottom: 1px solid #BBBBBB; 

поступательных три контейнеров. для последнего div дают теневой эффект.

Answer 4

This - один из способов достижения вышеуказанного выхода.

HTML

<div class="borderBox"> 
    <div class="innerCnt"> 
    <ul> 
     <li>Lorem Ipsum</li> 
     <li>Lorem Ipsum</li> 
     <li>Lorem Ipsum</li> 
     <li>Lorem Ipsum</li> 
    </ul> 
    </div> 
</div> 

CSS

.innerCnt { 
    background: #fff; 
    position: relative; 
    z-index: 1; 
    border-radius: 5px; 
} 
.innerCnt ul { 
    margin: 0 
} 
.borderBox { 
    height: 100px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    position: relative; 
} 
.borderBox:after, 
.borderBox:before { 
    border: 1px solid #ccc; 
    content: " "; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 1px; 
    border-radius: 8px; 
} 
.borderBox:after { 
    top: 3px; 
    border-radius: 7px; 
}