Question

我想在div的角落画一些三角形。因为我不想使用＆＃34; px＆＃34;我也想用百分比值来获得相同的结果。

它应该是这样的：

＆＃13;

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

＆＃13;

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

＆＃13;

非常感谢任何帮助。在此先感谢!!

Answer 1

您可以在三角形元素上使用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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

诀窍是首先使用position:absolute制作一个正方形，然后使用top和right位置负值（等于元素宽度的一半 ）调整它，然后使用transform

旋转它

Stack Snippet

.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background: black;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.triangle {
  position: absolute;
  top: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  background: green;
}

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

使用渐变背景的另一种方法

Stack Snippet

.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background-image: linear-gradient(45deg, black 92%, green 92%);
  color: white;
  border-radius: 12px;
}

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

Answer 4

当然，您也可以使用类似于文本框调整大小的条纹背景

.button {
  position: relative;
  width: 150px;
  height: 35px;
  background: black;
  border-radius: 8px;
  overflow: hidden;
}
.blue { background: #09f; }
.red { background: #f00; }
.orange { background: #f90; }
.green { background: #0c0; }

.button:after {
  content: '';
  width: 45px;
  height: 14px;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.7),
    rgba(255,255,255,.7) 2px,
    transparent 2px,
    transparent 4px
  );
  border-style: 0px solid;
  right: -15px;
  bottom: -4px;
  position: absolute;
  transform: rotate(-45deg);
}

<div class="button"></div>
<div class="button blue"></div>
<div class="button red"></div>
<div class="button orange"></div>
<div class="button green"></div>

Answer 5

如果容器上的 overflow: hidden 不是一个选项，您可以使用伪元素的底部边框：

.container:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    margin: -16px;
    border: 10px solid transparent;
    border-bottom-color: red;
    transform: rotate(-45deg);
}

为您的案例调整边距和边框值。

在div的角落画三角形

5 个答案: