多个 css 向左浮动的三角形效果

Question

如何使用纯 css 创建与图片上相同的 "triangle" border？

代码

/* .TEST {
      border-bottom: 169px solid red;
      border-top: 169px solid red;
      border-left: 42px solid transparent;
      border-right: 42px solid transparent;  
      height: 169px;
      width: 169px;
    } */

#d {
  width: 100%;
  font-size: 25px;
}
#d1,
#d2,
#d3 {
  width: 33%;
  float: left;
  padding: 30px;
  color: #D2B746;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
#d2 {
  width: 34%;
  color: #000;
}
.gradient_black {
  background: #303437;
}
.gradient_gold {
  background: #d4ba49;
}

<div id="d">
  <div id="d1" class="gradient_black">Test</div>
  <div id="d2" class="gradient_gold TEST">Test</div>
  <div id="d3" class="gradient_black">Test</div>
</div>

编辑： 还是我应该使用 SVG？

Answer 1

您可能希望在 CSS 中使用 transform: skewX()。参考：http://www.w3schools.com/css/css3_2dtransforms.asp（搜索"skewX"）现场示例：http://www.w3schools.com/css/tryit.asp?filename=trycss3_transform_skewx

Answer 2

使用 transform: skew() 你可以实现这个

注意：我对你的代码做了一些调整

*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0
}
#d {
  width: 100%;
  font-size: 25px;
  background: #303437;
  display: flex
}
#d1,
#d2,
#d3 {
  width: calc((100% / 3) - 6px);
  padding: 30px;
  color: #D2B746;
}
#d2.gradient_gold {
  background: #d4ba49;
  color: #000;
}
#d>div {
  transform: skew(-20deg)
}

<div id="d">
  <div id="d1" class="gradient_black">Test</div>
  <div id="d2" class="gradient_gold">Test</div>
  <div id="d3" class="gradient_black">Test</div>
</div>

多个 css 向左浮动的三角形效果

Multible css Triangle effect with float left

html

css

css-shapes