css上的三角

CSS上的三角形是一种常见的设计元素，经常用于创建下拉菜单、指向某个方向等等。最常用的方法是利用CSS的border属性和transparent属性来实现。

.triangle {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #000000 transparent;
} 

代码解释：

首先，设置元素的宽高为0。然后，通过border-width来设置边框的大小。下方边框的颜色设置为黑色，其余三个边框的颜色设置为透明色（transparent），这样就形成了下方有颜色的三角形。

改变三角形的朝向可以通过调整border-width的值来实现，例如想要左边有三角形，可以将左边的border-width调整为0px，右边的border-width调整为20px。

.triangle-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #000000;
    border-bottom: 10px solid transparent;
    border-left: none;
} 

代码解释：

这是一个朝左的三角形，把左边的border-width设为0，右边的设为实际需要的大小，再把左边的border-style改为none。同时把上下两个border-style设置为solid，才能形成实心的三角形。

除了使用border属性之外，也可以使用伪元素来实现三角形的效果。

.triangle-pseudo {
    position: relative;
}

.triangle-pseudo::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #000000;
} 

代码解释：

首先，在父元素（.triangle-pseudo）上设置position: relative属性，使在其内部的伪元素（::before）能够按照相对位置进行定位。

然后，将伪元素的宽高均设置为0，在border上进行设置，其中border-bottom-color即为三角形底部的颜色。

这些都是使用CSS来实现三角形的方法，不仅简单易行，而且兼容性良好，成为一种很好的设计元素。