用CSS问题绘制三角形

此代码

.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三角形。

您增加了浏览器的默认字体大小。ctrl+0或cmd+0 PC/Mac应该可以解决您的问题。

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

您可以尝试使用边框颜色FFFF吗

  border-color: #ffffff transparent transparent transparent;

---

您可以尝试使用边框颜色FFFF吗

  border-color: #ffffff transparent transparent transparent;

---

如果缩放不是问题，我认为问题是由旋转元素引起的。这是不必要的，可以通过边界来实现。实例：

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

.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;
}

---

如果缩放不是问题，我认为问题是由旋转元素引起的。这是不必要的，可以通过边界来实现。实例：

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

.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;
}

---

我读了所有的评论，找到了解决办法。请遵循。

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

您能否提供一个直接链接，以便我们查看问题？www.brisbanefineartauctions.com.auLooks fine in Windows Firefox 6。你确定你没有放大什么的？按Ctrl+0应重置缩放级别。此外，不需要使用转换，只需在边界附近进行更改。一些人报告说看到了这一点。我使用的是adobe browserlab，所以我认为这在某些浏览器上是一个问题，但在其他浏览器上不是。我在osx lionCan上的firefox 6.0.1上看到了这一点。您可以提供一个直接链接，以便我们可以看到这个问题吗？www.brisbanefineartauctions.com.auLooks fine in Windows firefox 6。你确定你没有放大什么的？按Ctrl+0应重置缩放级别。此外，不需要使用转换，只需在边界附近进行更改。一些人报告说看到了这一点。我使用的是adobe browserlab，所以我认为这在某些浏览器上是个问题，但在其他浏览器上不是。我在osx lionThank上的firefox 6.0.1上看到了这一点。非常感谢您的帮助。非常感谢您的帮助。