使用CSS创建三角形？ [英] Create a triangle with CSS?

问题描述

如何使用CSS创建以下形状？

How can I create the following shape with CSS?

我尝试这是一个解决方案：

I tried this to be a solution:

 .triangle:after {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        margin-top:1px;
        margin-left:2px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
    }

    .triangle:before {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid black;
    }

您可以看到它在 三角形 。这是工作，但有一个边界的诡计。有没有其他方法可以做？

You can see it working at Triangle. This is working, but with a trick of borders. Is there another way it could be done?

使用SVG向量这可以很容易做到，但我不想这么长的方式。

Using SVG vectors this can be done easily, but I don't want to go that lengthy way.

推荐答案

我发现了一个

I've found a WebKit-only solution, using the ▲ character:

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

<div class="triangle">&#9650;</div>

其他：

• CanIUse text-stroke的参考


• CSS-tricks article


• 有用的HTML形状

• CanIUse reference for text-stroke
• CSS-tricks article
• Useful HTML shapes

这篇关于使用CSS创建三角形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！