Вставить и расположить два повернутых div в углу прямоугольника правильно?

Question

Я пытаюсь создать заголовок с углом, показывающим два значка нестандартным способом.

Проблемы:

• Изменение значков 'размер невозможен без уничтожения всего (смайлики в этом примере).
• Код кажется намного более сложным, чем то, что я считаю достижимым.
• Трудно правильно расположить значки.

Я создал CodePen , который можно найти здесь .

Текущий результат:

HTML / CSS:

.mainContent {
    margin-left: 150px;
}
.title {
    margin: 18px 0 10px;
}
.header {
  position: relative;
  z-index: -2;
  height: 150px;
  background-image: linear-gradient(#ff9d2f, #ff6126);
  border-bottom-left-radius: 60% 15%;
  border-bottom-right-radius: 60% 15%;

  padding-top: 10px;
  overflow: hidden;
}

.iconHolder i {
    color: white;
    z-index: 2;
    position: relative;
    left: 60px;
}
.iconHolderSecondary i {
    color: black;
    z-index: 2;
    position: relative;
    left: 15px;
    top: 50px;

}
.typeHolders {
    position: relative;
    width: auto;
}
.iconHolder::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 250px;
  height: 200px;
  z-index: -1;
  transform: skewY(-40deg);
  background: linear-gradient(#4e4376, #2b5876);
  background-size: cover;
  border-bottom: 0.2em solid #fff;
}
.iconHolderSecondary::before {
    content: "";
  display: block;
  position: absolute;
  left: -130px;
  bottom: -118px;
    float: left;
  width: 150px;
  height: 200px;
  z-index: 0;
  transform: rotate(-40deg);
  background: lightblue;
  background-size: cover;
}

<div class="header">
  <div class="typeHolders">
    <div class="iconHolder">
      <i>?</i>
    </div>
    <div class="iconHolderSecondary">
      <i>?</i>
    </div>
  </div>
    
  <div class="mainContent">
    <h2 class="title">A title</h2>
    <p class="subtitle">Some subtitle</p>
  </div>
</div>

Answer 1

Вы можете упростить свой код, как показано ниже, переместив все элементы, которые создают фон, в основной контейнер и удалите много элементов div.Тогда вы можете легко настроить положение значков:

.header {
  position: relative;
  z-index: 0;
  height: 150px;
  background-image: linear-gradient(#ff9d2f, #ff6126);
  border-bottom-left-radius: 60% 15%;
  border-bottom-right-radius: 60% 15%;
  padding-top: 10px;
  overflow: hidden;
}
.header:before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  bottom: 0;
  width: 150px; /*same value*/
  background: 
    linear-gradient(205deg, transparent 32.5%, lightblue 33%), 
    /*adjust the degree to get the need direction*/
    linear-gradient(120deg,#4e4376, #2b5876);
  border-right: 3px solid #fff;
  transform-origin: top;
  transform: skewX(-45deg);
}
.iconHolder {
  width:150px; /*same value*/
  float:left;
  height:100%;
  text-align:center; /*make the first one in the middle horizontally*/
}
/*make the second one in the middle vertically*/
.iconHolder span:last-child {
  position:absolute; /*it will be relative to the main container*/
  top:50%;
  transform:translateY(-50%);
  left:10px;
}

.title {
  padding-top:20px;
}

<div class="header">
  <div class="iconHolder">
    <span>?</span>
    <span>?</span>
  </div>

  <h2 class="title">A title</h2>
  <p class="subtitle">Some subtitle</p>
 </div>

Если второй градиент не нужен, вы можете упростить еще больше, используя несколько фонов:

.header {
  position: relative;
  height: 150px;
  background:
    linear-gradient(to bottom left, #2b5876 49.8%,transparent 50%) -10px 0/ calc(75px + 10px) 50%,
    linear-gradient(to bottom right, #2b5876 49.8%,transparent 50%) 75px 0/ 75px 50%,
    
    linear-gradient(to bottom right, lightblue 49.8%,transparent 50%) left top/150px 100%,   
    /*we add more pixel to the size for the border effect*/
    linear-gradient(to bottom right, #fff 49.8%,transparent 50%) left/156px calc(100% + 6px),
    linear-gradient(#ff9d2f, #ff6126);
  background-repeat:no-repeat;
  border-bottom-left-radius: 60% 15%;
  border-bottom-right-radius: 60% 15%;
  padding-top: 10px;
  overflow: hidden;
}
.iconHolder {
  width:150px; /*same value*/
  float:left;
  height:100%;
  text-align:center; /*make the first one in the middle horizontally*/
}
/*make the second one in the middle vertically*/
.iconHolder span:last-child {
  position:absolute; /*it will be relative to the main container*/
  top:50%;
  transform:translateY(-50%);
  left:10px;
}

.title {
  padding-top:20px;
}

<div class="header">
  <div class="iconHolder">
    <span>?</span>
    <span>?</span>
  </div>

  <h2 class="title">A title</h2>
  <p class="subtitle">Some subtitle</p>
</div>