如何用带边框的透明背景绘制三角形？

Question

我想知道如何绘制带边框的透明背景的三角形？我发现的例子没有提供边界。有什么方法可以实现这个目标吗？

Answer 1

这是一个带边框的透明纯css三角形：

.container {
    width: 200px;
    height: 200px;
    position: relative;
    border-top: 4px solid #e74c3c;
}

.triangle {
    position: absolute;
    margin: auto;
    top: -70px;
    left: 0;
    right: 0;
    width: 137px;
    height: 137px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    border-right: 4px solid #e74c3c;
    border-bottom: 4px solid #e74c3c;
}

Demo

Answer 2

Demo

 .triangle {
     width: 0;
     height: 0;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid red;
     position:relative;
 }
 .triangle:after{
     content:'';
     position:absolute;
     top:5px;
     left:-45px;
     width: 0;
     height: 0;
     border-left: 45px solid transparent;
     border-right: 45px solid transparent;
     border-bottom: 92px solid white;
}

Answer 3

它具有透明背景的三角形，您可以使用这两个中的两个在另一个之上 http://jsfiddle.net/alexdets/vYAZQ/26/

Answer 4

绝对在现有的三角形上放置一个稍小的三角形。