如何显示这样的边框：- CSS

在 CSS 中，我们可以使用 border 属性来定义元素的边框。它有以下几个子属性：border-width（边框宽度）、border-style（边框样式）、border-color（边框颜色）。

下面是一个简单的例子：

.element {
  border: 2px solid red;
}

这个例子中，.element 是一个 CSS 选择器，用来选中对应的元素，它的样式设置了一个 2 像素宽的红色边框，边框样式为实线（solid）。

现在我们来看看如何显示题目中给出的边框。

按题意，我们需要一个三角形形状的边框，实际上可以通过伪元素 ::before 和 ::after 来实现。

.box {
  position: relative; /* 设置定位上下文 */
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

.box::before {
  content: ''; /* 必须设置 content 属性 */
  position: absolute; /* 设置绝对定位 */
  top: -10px; /* 距离顶部 10 像素 */
  left: 0; /* 距离左边界 0 像素 */
  border-style: solid;
  border-width: 0 0 10px 10px; /* 下方边框为 10 像素，右侧边框为 10 像素，其余为 0 */
  border-color: transparent transparent black transparent; /* 下方边框颜色为黑色，其余为透明 */
  z-index: -1; /* 将其放在下方 */
}

.box::after {
  content: ''; /* 必须设置 content 属性 */
  position: absolute; /* 设置绝对定位 */
  bottom: -10px; /* 距离底部 10 像素 */
  right: 0; /* 距离右边界 0 像素 */
  border-style: solid;
  border-width: 10px 10px 0 0; /* 上方边框为 10 像素，左侧边框为 10 像素，其余为 0 */
  border-color: black transparent transparent transparent; /* 上方边框颜色为黑色，其余为透明 */
  z-index: -1; /* 将其放在下方 */
}

这个例子中，我们先定义了一个正方形 .box，然后使用 ::before 和 ::after 分别创建了一个黑色三角形，最后使用 z-index 属性将三角形放在正方形下面。

这个例子比较复杂，需要注意以下几点：

• 伪元素 ::before 和 ::after 的 content 属性必须设置，否则它们不会被显示。
• 伪元素 ::before 和 ::after 默认是行内元素，它们不会破坏原有布局。
• border-width 属性可以分别设置上、右、下、左四条边的宽度，也可以使用类似 1px 2px 3px 4px 的方式设置它们的顺序。
• border-color 属性与 border-width 属性类似，也可以分别设置四条边的颜色。
• 在上面的代码中，伪元素 ::before 和 ::after 的 z-index 属性为 -1，这意味着它们被放在了正方形的下面，因为正方形的 z-index 默认为 0。