如何在CSS中创建边光滑的箭头三角形？

我想问我如何创建一个css箭头三角形，它有光滑的边，也就是说，在不使用任何图像的情况下，箭头的边没有切口？我已经试过教程了-

[

。向上箭头
{
宽度：0；
身高：0；
左边框：10px实心透明；
右边框：10px实心透明；
边框底部：10px纯黑；
位置：绝对位置；
顶部：75px；
左：250px；
}

---

我能想到的唯一一件事是，页面上有另一个元素，该元素与箭头略微重叠，测试时效果良好：

---

这可能与您的浏览器有关，不过您需要使用伪元素并旋转它：

---

CSS:

不要忘记添加供应商前缀或使用脚本自动添加它们。

---

---

使用伪元素可以在框中添加内容：ie.

它可以在没有刻痕的情况下正常工作：哦，天哪，你没有仔细阅读我的问题。你已经向我展示了我已经展示的内容。你必须有一只眼睛来捕捉这个错误。你的演示在右边也有那个切口。请再次检查。@Sachin演示在我这边正常工作，至少它可以你这方面不行。代码没有问题。你可以找到一些解决方案，但问题的原因仍然是个秘密。我已经在所有主要浏览器的最新版本上测试了演示，比如Chrome、Opera、FireFox甚至Maxthon。所有这些都渲染了三角形。这对你来说都不好。请记住。可能您使用的是某个浏览器的旧版本，或者您的屏幕/图形/…相关设置有问题…是的，这是由于浏览器造成的。我上传给您的图像来自firefox。firefox显示了剪切。当我在chrome中看到它时，它很好。那么我如何使它在两种浏览器中都相等？

.arrow_up {
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid black;
    position: absolute;
    top: 75px;
    left: 250px;
}

.arrow_up
{
    width: 100px; 
    height: 50px; 
    position:absolute;
    top:150px;
    left:250px;
    overflow:hidden;/* hide part of the pseudo overflowing*/
}
.arrow_up:before {
    content:'';
    position:absolute;
    width:100%;
    padding-top:100%;/* it will draw a square , change this value for other degrees angles*/
    transform:rotate(45deg);/* we'll see a corner */
    background:black;
    top:20px;/* tune this according to size of parent or size to be seen */
}