Внутренняя тень градиентом

385

07 марта 2017, 15:33

Здравствуйте!

Мне нужно сделать внутреннюю тень у блока, но что бы она была под углом 45deg.

Я пробовал такое сделать обычной тенью, но оно не так выглядит, как надо:

.shadow { 
    width: 250px; 
    height: 250px; 
    box-shadow: inset 0px 0px 50px #000; 
}

<div class="shadow"></div>

Мне пришла в голову идея: сделать тень градиентом. Но я не знаю как.

Пример нужной тени:

Answer 1

Предлагаю попробовать background:

body { 
  margin: 0; 
  display: flex; 
} 
 
div { 
  width: 100vmin; 
  height: 100vmin; 
  margin: auto; 
  background: 
    linear-gradient(45deg, transparent 70%, black 100%), 
    linear-gradient(-45deg, transparent 70%, black 100%), 
    linear-gradient(-135deg, transparent 70%, black 100%), 
    linear-gradient(135deg, transparent 70%, black 100%) 
}

<div></div>

Answer 2

.cover { 
  width: 300px; 
  height: 200px; 
  padding: 60px 0 0 0; 
  background: hsla(0, 0%, 10%, 1); 
} 
 
.shadow { 
  width: 150px; 
  height: 150px; 
  margin: 0 auto; 
  box-shadow: 10px 10px 200px hsla(0, 0%, 100%, 1), -10px -10px 200px hsla(0, 0%, 100%, 1); 
  background: hsla(0, 0%, 90%, 1); 
  transform: rotate(45deg); 
}

<div class="cover"> 
  <div class="shadow"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Внутрення круговая тень градиентом

Всем привет! Я недавно задавал, как сделать наклонную внутреннюю тень

272

CSS

Обводка SVG в Internet Explorer не отображается

Для того, чтобы задать нестандартную обводку блоку, использую в качестве фона SVGЦвет обводки задаю так stroke: #FFD200

384

CSS

Плавное увеличение/ уменьшение границ

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

305

CSS

Съезжают стили оформления, из за 2 файлов css

Привет

283