Question

我正在尝试使用（黑色）边框制作左上角三角形（红色）。我希望它一直有黑色边框。这种尝试使角度成为一个正方形来伪造它（推到屏幕外面以模仿三角形）

我想要边界，我的尝试无法正常工作

#corner {
  height: 75px;
  width: 100px;
  position: absolute;
  left: -3em; top: -2em;
  z-index: 999;
  transform: rotateZ(-45deg);
  background-color: red;
  border-bottom: 5px solid #0c0c0c;
}

<div id="corner"></div>

Answer 1

有一种更简单的方法来创建三角形，您只需使用an element with a width / height of 0。

对于你想要的边框，我的想法是有两个不同颜色和不同尺寸的重叠三角形，可以看一下以下片段：

＆＃13;

.triangle-up-left-1 {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 85, 85);
  border-right: 50px solid transparent;
  z-index:2;
  position:absolute;
  top:5px;
  left:13px;
}
.triangle-up-left-2 {
  width: 0;
  height: 0;
  position:absolute;
  top:0;
  border-top: 68px solid rgb(0, 0, 0);
  border-right: 68px solid transparent;
  z-index:1:
}

＆＃13;

<div class="triangle-up-left-1"></div>
<div class="triangle-up-left-2"></div>

＆＃13;

Answer 2

您也可以像这样制作三角形：https://css-tricks.com/examples/ShapesOfCSS/

我试图将它们中的两个和边距组合起来定位它，所以看起来像边框一样。也许这是一个可能的解决方案。欢呼声。

＆＃13;

.triangle1 {
  width: 0;
  height: 0;
  border-top: 100px solid black;
  border-right: 100px solid transparent;
}
.triangle2 {
  width: 0;
  height: 0;
  border-top: 82px solid red;
  border-right: 82px solid transparent;
  position: absolute;
  margin-top: -95px;
  margin-left: 5px;
}

＆＃13;

<div class="triangle1">
  <div class="triangle2"></div>
</div>

＆＃13;

创建完整的边框三角形div

2 个答案: