尝试从对面开始重新创建线性渐变效果

Question

我一直在尝试创建一个适合正方形的三角形，以便扩展和移动它。尖端必须接触正方形的顶部，我设法清除了它的一侧，但为了使尖端接触顶部的 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>

Answer 1

我认为这个三角形将适合您的任务。 检查这个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>