css中的右/左三角形答案

【问题标题】：Right/left sided triangle in csscss中的右/左三角形
【发布时间】：2021-06-08 12:44:54
【问题描述】：

您好，我正在尝试以下操作：

它们的三角形应该是容器高度的 40% 和 50% 的宽度，所以它们在中间相交。

我一直在尝试做类似的东西..但到目前为止没有成功..

环顾四周，到目前为止我没有发现任何可以使用的东西。

我的代码：

div {
  height: 373px;
  width: 0px;
  margin: 26px;
  display: inline-block;
}

.left {
  border-bottom: 100px solid #ff0;
  border-left: 320px solid transparent;
}

.right {
  border-bottom: 100px solid #f00;
  border-right: 320px solid transparent;
}

header {
  border: 2px solid black;
  width: 50%;
  height: 500px;
}

<header>
  <div class="right"></div>
  <div class="left"></div>

</header>

希望比我聪明的人看看我应该从这里去哪里......

【问题讨论】：

尺寸是否总是被硬编码，或者解决方案是否应该适应任何尺寸的容器？
查看apps.eky.hk/css-triangle-generator并选择“类型：scalene”
适应大小。
@elveti 我不知道如何用这个制作一个右侧三角形。它只会使两边均匀？
@andrelange91 选择类型“Scalene”，您将能够单独更改尺寸（如果我正确理解您的需求）

标签： css css-shapes

【解决方案1】：

使用如下背景颜色：

.box {
  height:300px;
  background:
    /* Right bottom triangle*/
    linear-gradient(to bottom right,transparent 49.5%,blue 50%) bottom right,
    /* left bottom triangle*/
    linear-gradient(to bottom left ,transparent 49.5%,red  50%) bottom left ,
    yellow;
  background-size:50% 40%; /* Width height*/
  background-repeat:no-repeat;
}

<div class="box">

</div>

更多详情相关答案：How do CSS triangles work?

另一个使用伪元素的想法（你可以用普通元素替换），以防你想要不同的元素。

.box {
  height: 300px;
  background: yellow;
  position: relative
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  height: 40%;
  width: 50%;
  bottom: 0;
}

.box:before {
  left: 0;
  background: linear-gradient(to bottom left, transparent 49.5%, red 50%);
}

.box:after {
  right: 0;
  background: linear-gradient(to bottom right, transparent 49.5%, blue 50%);
}

<div class="box">

</div>

【讨论】：

这并不能解决我的问题。它们的高度不是 40%，而且它们不会在中间相遇。
他们是，他们为我做的
我同意伪元素方法

【解决方案2】：

由于您需要百分比值，您可以使用clip-path。请注意，某些浏览器 https://caniuse.com/#feat=css-clip-path 可能不完全支持它，并且对于某些您可能需要前缀（例如 -webkit-clip-path）

.wrap {
  height: 200px;
  width: 100%;
  position: relative;
  background: #333;
}
.triangle {
  background: red;
  clip-path: polygon(0 40%, 0% 100%, 100% 100%);
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 50%;
}
.triangle.tr-right {
  left: auto;
  right: 0;
  clip-path: polygon(100% 40%, 0% 100%, 100% 100%);
}

<div class="wrap">
  <div class="triangle tr-left"></div>
  <div class="triangle tr-right"></div>
</div>

JSFiddle

使用Clippy 创建的剪辑路径

【讨论】：

您可以通过应用高度和保持剪辑路径简单来简化：jsfiddle.net/enbmqsy6

【解决方案3】：

 * {
        box-sizing: border-box;
      }
      .triangular-pointer-box {
        display: flex;
        align-items: center;
        background: #161616;
        padding: 20px;
        padding-left: 120px;
        height: 200px;
        position: relative;
        width: 80%;
      }
      .triangular-pointer-box > h3 {
        color: #fff;
      }

      .triangular-pointer-box:after {
        content: "";
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 100px solid #161616;
        position: absolute;
        right: -100px;
        top: 0;
      }
      .triangular-pointer-box:before {
        content: "";
        width: 0;
        height: 0;
        border-top: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 100px solid #ffffff;
        position: absolute;
        left: 0;
        top: 0;
      }

<div class="triangular-pointer-box">
      <h3>Title goes here</h3>
    </div>

【讨论】：