css - 尝试从另一侧开始重新创建线性渐变效果

我一直在尝试创建一个适合正方形的三角形，以进行扩展和移动。笔尖必须接触正方形的顶部，我设法清除了它的一侧，但是为了使ita三角形与笔尖接触顶部，我必须在另一侧上做同样的事情。问题是，即使我在CSS中从右到左或从下到上更改它也总是从左侧开始。我正在使用Rnd库来扩展和移动它。谁能帮忙，谢谢

CSS：

  .triangle{
        width: 50%;
        height: 100%;
        left: 0px;
        top: 0px;

        background:

    linear-gradient(to right bottom, white 50%, transparent 50%)
}

这是react / HTML，但可能不需要，我删除了所有不必要的内容：

<Rnd

    style={{backgroundColor:this.props.element === "triangle" ? 'black' : '', border:this.props.id=== this.props.selectedDestinationID ? "solid 2px #ddd" : ""}}
      default={{

        x: 500,
        y: 250,
        width: 60,
        height: 40,
      }}
        bounds="parent">
        <div  onClick={this.selectDestinationsCallBack} class=triangle"
       } style={{ paddingBottom: '0px',}}/>
        </Rnd>

最佳答案

我认为这个三角形将适合您的任务。
选中此Js Fiddle

.box {
  display: inline-block;
  background: #ccc;
}

.triangle {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid black;
}

<div class="box">
  <div class="triangle"></div>
</div>