[分享]css内凹三角

CSS内凹三角，指的是在一个元素中添加三角形的效果，三角形向内凹陷。这种效果在一些特定的设计中经常出现。.triangle { width: 0; height: 0; borderleft: 30p...

CSS内凹三角，指的是在一个元素中添加三角形的效果，三角形向内凹陷。这种效果在一些特定的设计中经常出现。

.triangle {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #000;
} 

上面的代码是一个比较简单的实现内凹三角的方法。其中，通过设置元素的边框样式，实现了一个形状为正三角形的效果。

这种实现方法有一个缺陷：无法控制三角形的位置。我们可以借助一些其他的技巧，来实现更加复杂的效果。例如：

.triangle {
    position: relative;
    width: 100px;
    height: 100px;
}
.triangle:before {
    position: absolute;
    content: "";
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #000 transparent;
    border-style: solid;
    top: -10px;
    left: 50%;
    transform: translate(-50%, 0);
} 

上面的代码中，使用了一个伪元素，通过设置它的位置和边框样式，实现了一个位于元素上方的三角形。

当然，这只是 CSS 内凹三角的其中几种实现方法，具体的应用还需要根据实际情况进行调整。