在div的角落绘制三角形 [英] Draw triangle in corner of div

问题描述

我想在div的角落绘制某种三角形.因为我不想使用"px"我也希望通过百分比值来达到相同的结果.

I'd like to draw some kind of triangle in the corner of a div. Because I don't want to use "px" I'd like to achieve the same result also with percentage values.

它应该是这样的:

.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>

任何帮助将不胜感激.在此先感谢！

Any help would be very appreciated. Thanks in advance!!

推荐答案

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

You can use position: absolute on triangle element and set top and right properties to 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位置一起用于三角形.

You can also just use pseudo-element with absolute position for triangle.

.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>

下面是另一个示例，该示例的所有角都是三角形.

Below is another example with triangles in all corners.

.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>

这篇关于在div的角落绘制三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！