网页中一些常见的三角形,能够应用 CSS 间接画进去
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid;
border-color: red blue yellow green;
}
有四个三角形!如果想要其中的一个三角形,把其余 border 设为通明就好,比方我想要向右的箭头,只须要将最初两行改为:
/* 把所有边设为通明,设置须要的那条边的色彩即可 */
border: 50px solid transparent;
border-left-color: green;
那能不能画个其余款式的三角形呢?比方这样:
还是批改最初两行代码:
border: solid transparent;
border-left-color: green;
/* 批改 border-width 能够扭转三角形的形态 */
border-width: 50px 25px;
还能够画直角三角形,只须要批改 border-width 为:
border-width: 50px 25px 0;