在div的角落绘制三角形

Question

我想在div的角落绘制某种三角形。因为我不想使用“ px”，所以我也希望使用百分比值获得相同的结果。

它应该是这样的：

.container {
  position: absolute; 
  top: 5%; 
  left: 5%; 
  width: 60%; 
  height: 30%; 
  background: black; 
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.triangle {
  position: relative;
  top: 10%;
  left: 90%;
  width: 10%;
  height: 10%;
  -webkit-transform: rotate(45deg);
  background: green;
}

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

任何帮助将不胜感激。提前致谢！！

Answer 1

您可以简单地依赖背景并在背景颜色上方创建具有线性渐变的三角形，而无需额外的标记和伪元素：

.container { 
  width: 400px; 
  height: 100px; 
  background: 
   linear-gradient(to top right,transparent 50%,#608A32 0) top right/40px 40px no-repeat,
   black; 
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

<div class="container">
</div>

相关：https : //stackoverflow.com/a/49696143/8620333

Answer 2

您可以position: absolute在三角形元素上使用，top并将right属性设置为0。

.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background: black;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608A32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}

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

您也可以只使用pseudo-element带有absolute位置的三角形。

.container {
  position: relative;
  width: 300px;
  height: 70px;
  background: black;
  border-radius: 12px;
  overflow: hidden;
}

.container:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608A32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}

<div class="container"></div>

下面是在所有角处都带有三角形的另一个示例。

.all_triangles_container {
  position: relative;
  width: 300px;
  height: 70px;
  background: black;
  overflow: hidden;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
}

.triangle_tl {
  border-width: 0 0 30px 30px;
  border-color: transparent transparent transparent green;
  left: 0;
  top: 0;
}

.triangle_tr {
  border-width: 0 30px 30px 0;
  border-color: transparent red transparent transparent;
  right: 0;
  top: 0;
}

.triangle_br {
  border-width: 30px 30px 0 0;
  border-color: transparent yellow transparent transparent;
  right: 0;
  bottom: 0;
}

.triangle_bl {
  border-width: 0 30px 30px 0px;
  border-color: transparent transparent purple transparent;
  left: 0;
  bottom: 0;
}

<div class="all_triangles_container">
  <div class="triangle triangle_tl"></div>
  <div class="triangle triangle_tr"></div>
  <div class="triangle triangle_br"></div>
  <div class="triangle triangle_bl"></div>
</div>