将两个旋转的div嵌入并正确放置在矩形的角上？

Question

我正在尝试创建一个标题，该标题的一角以自定义方式显示两个图标。

问题：

• 在不破坏所有内容（此示例中为表情符号）的情况下，修改图标的大小是不可能的。
• 代码似乎比我认为可以实现的复杂得多。
• 很难正确放置图标。

我创建了一个 CodePen ，可以在here上找到。

当前结果：

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>