在div的角落画三角形-解网

问：

我想在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>

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

HTML CSS格式

答：

36赞 Nenad Vracar 2/24/2018 #1

您可以在 triangle 元素上使用，并将和 properties 设置为 0。position: absolutetopright

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

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

4赞 Bhuwan 2/24/2018 #2

诀窍是先做一个正方形，然后使用和定位负值（等于元素宽度的一半）来调整它，然后使用position:absolutetoprighttransform

堆栈代码段

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

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

堆栈代码段

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

26赞 Temani Afif 2/24/2018 #3

您可以简单地依靠背景并创建三角形，而无需额外的标记和伪元素：linear-gradient

.container { 
  width: 400px; 
  height: 100px; 
  background: linear-gradient(-135deg,#608A32 35px,#000 0); 
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

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

2赞 Wookie88 5/18/2021

这绝对是最好的答案，溢出：当父元素的背景透明时，隐藏 + 伪元素有时会导致问题（三角形和元素的其余部分之间有 1px 的间隙）。

0赞 vol7ron 6/16/2019 #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>

0赞 Crafty Cat 5/19/2021 #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);
}

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

上一个：输入数字 - 使用箭头从分钟开始

下一个：字符串加密 - 生成独特的模式，如 Spotify 代码

在div的角落画三角形

Draw triangle in corner of div

评论

评论