Question

我的网站左上角有一个三角形

＆＃13;

#corner {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid #000;
}

＆＃13;

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

＆＃13;

编辑 - 我希望它有一个5px的红色边框（仅在有角度的一侧）所以三角形和边框是不同的颜色

理想情况下，它也会有一个.png图像，但如果需要，我可以将另一个div置于顶部

这是整个页面的角三角形

Answer 1

创建两个div：

＆＃13;

#corner {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 55px solid #f00;
  border-bottom: 55px solid transparent;
  border-right: 55px solid transparent;
  border-left: 55px solid #f00;
}

#corner-inner {
  position: absolute;
  z-index: 999;
  left: -55px;
  top: -55px;
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid #000;
}

＆＃13;

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

＆＃13;

Answer 2

我认为实现目标的最佳方法是使用 (gdb) wh reg +1 (gdb) tu reg next 属性，而不是操纵 transform ，甚至可能需要两个元素和许多不必要的代码。

查看此fiddle或以下代码段以获取直观表示。

<强>段：

border

#corner {
  /* Dimensions */
  height: 200px;
  width: 200px;
  
  /* Positioning */
  position: absolute;
  left: -7.5em;
  top: -7.5em;
  z-index: 999;
  transform: rotateZ(-45deg);
  
  /* Styling */
  background-color: red;
  border-bottom: 5px solid #0c0c0c;
}

Answer 3

您甚至可以尝试伪元素:before和:after。

#corner {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #000;
  border-bottom: 50px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid #000;
}
#corner:before{
  content:"";
  position:absolute;
  border-top: 5px solid red;
  border-left: 5px solid red;
  top:-50px;
  left:-50px;
  width:92px;
  height:92px;
}
#corner:after{
  content:"";
  position:absolute;
  border-right: 5px solid red;
  top:-104px;
  left:-83px;
  width:93px;
  height:140px;
  transform:rotate(45deg);
}

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

创建带边框的三角形div

3 个答案: