css3三角形兼容 |css3中获取焦点属性

/*CSS3三角形*/
.triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;  /* 上边框 */
border-right: 10px solid red;    /*右边框 */
border-bottom: 10px solid transparent; /* 下边框 */
border-left: 10px solid transparent;  /* 左边框 */
display: inline-block;
}

上述代码可以创建一个红色的三角形。但是，它可能无法在所有浏览器中正确显示。为了确保代码的兼容性，大家可以添加一些浏览器前缀。

/* 使用浏览器前缀的CSS3三角形 */
.triangle {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid red;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
display: inline-block;
/* Firefox */
-moz-border-bottom-colors: red;
-moz-border-left-colors: red;
-moz-border-right-colors: transparent;
-moz-border-top-colors: transparent;
/* Safari 和 Chrome */
-webkit-border-bottom-colors: red;
-webkit-border-left-colors: red;
-webkit-border-right-colors: transparent;
-webkit-border-top-colors: transparent;
}

以上代码添加了 Mozila Fireox 和 Safari/Chrome 浏览器前缀。现在，你的代码应该能够在所有主要的浏览器中正确地显示三角形。