Как создать коробку с обрезанным углом и тенью? (Дизайн сайта в штучной упаковке) - PullRequest
Новая
       16

Как создать коробку с обрезанным углом и тенью? (Дизайн сайта в штучной упаковке)

4 голосов
/ 04 октября 2019

Я работаю над сайтом, и мне нужно отрезать верхний левый угол основного корпуса. После этого я хочу нанести тень на основной корпус. Эта тень не должна обойти исходную рамку, она должна следовать за основным телом с новым обрезанным углом - для этого я использовал тень.

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

Моя текущая попытка такова: https://codepen.io/Sophvy/pen/MWgMZzG

HTML: 

<div id ="main1">
  <div id ="wrap"></div>
  <header>

  </header>
  <main>
  </main>

</div>

CSS: 


#main1 {
  height:500px;
  width:500px;
  position:relative;
}
#wrap {
  width:500px;
  height:500px;
  background: linear-gradient(135deg, transparent 70px,green 0);
  filter: drop-shadow(0px 0px 10px blue);
  position:absolute;
}

header {
  height:55px;
  max-width:100%;
  background-color:#eee;
  position: relative;
}

Моя проблема здесь в том, что заголовок не обрезается, поэтому он просто перекрывается. Я попытался использовать z-index, но не смог заставить его работать даже с положением: абсолютное / относительное для каждого элемента. Я посмотрел на множество разных идей, но не нашел ни одной, которая бы решала ту же проблему, что и моя, с моим заголовком.

Что мне нужно изменить, чтобы отрезать угол основного корпусаи заголовок, а затем впоследствии получить рабочую тень?

РЕДАКТИРОВАТЬ: мое решение

HTML: 


<div id="background">
  <div id ="main1">
    <div id ="wrap">
      <header>
        header
      </header>
      <main>
      main
      </main>
    </div>
  </div>
</div>

CSS: 

#background {
  height:500px;
  width:600px;
  padding-top: 5px;
  background-color:#bbb;
  padding-bottom: 5px;
}

#main1 {
  margin: 10px auto;
  width: 90%;
  height:400px;
  text-align:right;
  filter: drop-shadow(0px 0px 10px blue); 
}
#wrap {
  width:500px;
  height:500px;
  background: linear-gradient(135deg, transparent 70px,green 0);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
  position:absolute;
}

header {
  height:55px;
  max-width:100%;
  background-color:#eee;
  position: relative;
}

1 Ответ

1 голос
/ 04 октября 2019

Вы где очень близко!

Если вы используете путь обрезки, вы можете вырезать как заголовок, так и основную часть поля. Затем, когда вы установите фильтр тени на главном элементе, вы должны получить желаемый стиль. 

#main1 {
  height:500px;
  width:500px;
  filter: drop-shadow(0px 0px 10px blue);
}
#wrap {
  width:500px;
  height:500px;
  background: linear-gradient(135deg, transparent 70px,green 0);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
  position:absolute;
}

header {
  height:55px;
  max-width:100%;
  background-color:#eee;
  position: relative;
}
<div id ="main1">
  <div id ="wrap">
    <header>
    </header>

    <main>
    </main>
  </div> 
</div>
...