CSS3 Set Box Shadow to aslope corner

Я кодирую некоторые причудливые вещи для обучения самому себе.CSS3 Set Box Shadow to aslope corner

У меня есть угловой левый угол. Теперь я хочу, чтобы добавить тень коробки, и он показал, как на следующем рисунке:

Это мой фрагмент кода:

html, body { 
    margin: 0px; 
} 

.navbar { 
    position:relative; 
    content:""; 
    border-left: 300em solid #454545; 
    border-bottom: 120px solid transparent; 
    z-index: 2; 
    box-shadow: 0px 8px 23px 4px black; 
} 


.under-bar { 
    margin-top: -40px; 
    background: #851e39; 
    height: 200px; 
    opacity: 0.8 
} 

<html> 
    <body> 
     <div class="navbar"> 

     </div> 
     <div class="under-bar"> 
     </div> 
    </body> 
</html>

Может кто-то помочь мне установить окно-тень под заголовок?

источник

2017-01-22 mimu1011

Вы можете использовать transform: rotate(); вместо пограничных трюков.

body { 
 
    margin: 0; 
 
} 
 
.navbar { 
 
    height: 200px; 
 
    background-color: #9d4b61; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.navbar:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: -50px; 
 
    width: 100%; 
 
    height: 100px; 
 
    box-shadow: 0px 8px 23px 4px #000; 
 
    transform: rotate(-1deg); 
 
    background-color: #333; 
 
} 
 
.menu { 
 
    position: relative; 
 
    left: 20px; 
 
    top: 20px; 
 
    color: #fff; 
 
}

<div class="navbar"> 
 
    <div class="menu">menu</div> 
 
</div>

источник

2017-01-22 02:14:13 Stickers

Nice решение. Но если я хочу добавить некоторый элемент управления, например Button или теги, они находятся под divlope div. Как я могу поставить их на передний план? – mimu1011

@Mo_Code Как и в предыдущем демо, оберните их в div и установите положение относительно увеличения порядка укладки, все должно быть установлено. – Stickers

Вы можете использовать border-radius и transform: scale:

body { 
 
    margin: 0; 
 
    background: #9d4b61; 
 
} 
 

 
.navbar { 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #5c5c5c; 
 
    border-radius: 0 0 100%/22px 0; 
 
    box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8); 
 
    transform: scale(1.1,1); 
 
}

<div class="navbar"></div>

border-radius: 0 0 100%/22px 0 установить радиус в правом нижнем углу, что 100% в ширину и высоту 22px, что дает радиус а " растянутый "взгляд.

transform: scale(1.1,1) растягивает весь элемент, чтобы скрыть тень в каждой стороне.

источник

2017-01-22 02:13:19 TheYaXxE

ответ

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