用CSS问题绘制三角形

Question

此代码

.right {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  border-width: 200px;
  height:0;
  width:0;
  position: relative;
  top:-800px;
  left:600px;
  margin:0px;
  padding:0px;
}

在Safari中创建一个如下所示的三角形：

但在其他浏览器中存在问题。在mac上的firefox上，三角形有这样的线条：

如何确保线条不显示？我宁愿不用图像替换css三角形。

Answer 1

如果缩放不是问题，我认为问题是由旋转元素引起的。这是不必要的，可以简单地使用边框。实例：http://jsfiddle.net/tw16/TQx7x/

删除变换并调整边框样式，如下所示：

.left {
    border-color: transparent #ffffff transparent transparent; /* change to this */
    border-style: solid;
    border-width: 200px;
    height: 0;
    left: -400px;
    margin: 0;
    padding: 0;
    position: relative;
    top: -400px;
    width: 0;
}
.right {
    border-color: transparent transparent transparent #ffffff; /* change to this */
    border-style: solid;
    border-width: 200px;
    height: 0;
    left: 600px;
    margin: 0;
    padding: 0;
    position: relative;
    top: -800px;
    width: 0;
}

Answer 2

我阅读了所有评论，并找到了解决方案。请关注link。

Answer 3

您的浏览器的默认字体大小已增加。 ctrl + 0或cmd + 0（PC / Mac）应解决您的问题。

Answer 4

你能尝试使用border-color #ffffff吗？

  border-color: #ffffff transparent transparent transparent;