CSS：分色div中的三角形指示符

Question

我正在尝试创建一个两种不同颜色的div，水平分割，带有从左侧到右侧指向的倾斜（三角形）分隔符/指示器。这是我得到的模型：

我在这里找到了一个非常相似的指南（'Talk Bubble'示例）：

https://css-tricks.com/examples/ShapesOfCSS/

在这里我找到了一个创建双色div的例子：

CSS: Set a background color which is 50% of the width of the window

我在这里有一个CodePen和我所拥有的东西，而我只是努力将这些部分放在一起以满足模型。我正在努力确保角度指示器最大为该div高度的100％，因为它将与其他颜色的其他类似div一起使用，我不希望重叠边缘。

https://codepen.io/chjaro/pen/MGmLxb?editors=1100

#cs-results>#csBullets {
  text-align: justify;
  margin: 0 auto;
  width: 40em;
  padding-left: 100px;
  font-size: 24px;
}

#csBullets>ul>li {
  list-style: none;
  color: #fff;
}

#csBullets>ul>li::before {
  content: "\2022";
  color: #188ac5 !important;
  position: relative;
  top: 0em;
  padding-right: 10px;
}

#csTitle {
  color: white;
  font-size: 48px;
  margin: auto;
  max-width: 75%;
  padding: 20px 0 50px 0;
}

#cs-what-we-did {
  height: 400px;
  background: linear-gradient(90deg, #9fa0a2 40%, #58595B 40%);
  z-index: -3;
  margin: 0;
  padding: 0 20%;
}

#csBullets {
  /* 	background-color: #9fa0a2; */
  height: 400px;
  margin: -9% 0 -10% 0;
  padding: 8% 0
}

#csBullets:after {
  content: "";
  position: absolute;
  left: 66%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 175px solid transparent;
  border-left: 150px solid #9fa0a2;
  border-bottom: 200px solid transparent;
  z-index: -1
}

@media screen and (max-width: 990px) {
  #csBullets:after {
    display: none !important;
  }
  #cs-what-we-did {
    height: 100%;
    background: linear-gradient(90deg, #9fa0a2 50%, #58595B 50%);
    z-index: -3;
  }
  #csBullets {
    height: 100%;
  }
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cs-what-we-did" class="col-lg-12 container-fluid cs-single">

  <div class="sectionTitleBar">
    <h2 class="sectionTitle" style="color: #fff;">Section Title</h2>
  </div>

  <div class="col-md-6" style="" id="csBullets">
    <h3 class="sectionTitle" style="color:#fff;">Goals</h3>
    <ul>
      <li>Placeholder</li>
      <li>Placeholder</li>
      <li>Placeholder</li>
      <li>Placeholder</li>
    </ul>
  </div>

  <div class="col-md-6" style="z-index: -1">
    <h3 class="sectionTitle" style="color:#fff;">Results</h3>
    <p style="text-align: left; color: #fff">Placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder.</p>
    <p style="text-align: left; color: #fff">“Placeholder placeholder placeholder placeholder placeholder ,” Placeholder says. “Placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder
      placeholder placeholder placeholder placeholder placeholder placeholder.”</p>
  </div>

</div>

Answer 1

我会对此采取不同的方法，只使用绝对定位的伪元素来创建角度的元素，然后转换它们以获得所需的形状。之后，如果出现重叠，您可以使用一些z-index魔术将其保留在内容之后。这样它始终与容器本身相关，因此无论容器的高度如何，它都能正常工作。

＆＃13;

＆＃13;

.container {
  width: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
}

.title {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  z-index: 3;
}

.left,
.right {
  flex: 1;
  padding: 50px 60px 20px;
}

.left {
  z-index: 2;
  background: gold;
}

.right {
  background: tomato;
  position: relative;
  z-index: 1;
}

.right::before,
.right::after {
  z-index: -1;
  content: "";
  background-color: gold;
  position: absolute;
  width: 50%;
  right: 100%;
}

.right::before {
  top: 0;
  bottom: 48%;
  transform: rotate(-15deg);
  transform-origin: top right;
}

.right::after {
  bottom: 0;
  top: 48%;
  transform: rotate(15deg);
  transform-origin: bottom right;
}

＆＃13;

<div class="container">
  <h1 class="title">Lorem ipsum dolor sit amet.</h1>
  <div class="left">
    <h1>Lorem ipsum.</h1>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, recusandae.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
    </ul>
  </div>
  
  <div class="right">
    <h1>Lorem ipsum.</h1>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, recusandae.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;