如何在css中创建空心三角形[重复]答案

【问题标题】：how to create Hollow triangle in css [duplicate]如何在css中创建空心三角形[重复]
【发布时间】：2015-06-24 20:16:43
【问题描述】：

我想用CSS 创建空心三角形，但我不知道如何空心。我可以用CSS 创建三角形，但我有一个问题，那就是：我不能挖空这个三角形。

这是我的代码：

HTML：

<div id="tringle"></div>

CSS：

#tringle {
  position: absolute;
  height: 0;
  width: 0;
  top: 50%;
  left: 7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid white;
}

【问题讨论】：

我的朋友看这篇文章可能对你有帮助... [create-triangle-with-css][1] [1]: stackoverflow.com/questions/16231184/create-triangle-with-css

标签： css css-shapes

【解决方案1】：

不完全是跨浏览器，但可以。希望我能理解您的要求。

http://jsfiddle.net/wmDNr/3/

 .triangle { 
     position: relative;
     width: 20px;
     margin-top: 100px;
 }
 .triangle>div { 
     width: 20px;
     height: 2px;
     background: red;
     margin-top: 100px;
 }

 .triangle>div:before {
     content: " ";
     display: block;
     width: 20px;
     height: 2px;
     background: red;
     -webkit-transform: rotate(56deg);
     -moz-transform: rotate(56deg);
     -ms-transform: rotate(56deg);
     transform: rotate(56deg);
     position: absolute;
     top: -8px;
     right: -5px;
 }
 .triangle>div:after {
     content: " ";
     display: block;
     width: 20px;
     height: 2px;
     background: red;
     -webkit-transform: rotate(-56deg);
     -moz-transform: rotate(-56deg);
     -ms-transform: rotate(-56deg);
     transform: rotate(-56deg);
     position: absolute;
     top: -8px;
     left: -5px;
 }

【讨论】：

【解决方案2】：

我没有解决方案，但我有两个三角形的解决方法，FIDDLE

HTML 代码

<div id="tringle"></div>
<div id="tringle2"></div>

CSS 代码

    #tringle {
        left:10px;
        width: 0; 
        height: 0; 
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid black;
    }
    #tringle2 {

        left:10px;
        width: 0; 
        height: 0; 
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #FFF;
        left: 57px;
        position: absolute;
        top: 38px;

    }

【讨论】：

【解决方案3】：

分叉 rajesh kakawat - 你可以用一个 div 获得相同的效果：http://jsfiddle.net/aDcTb/

<div id="triangle"></div>

#triangle {
        left:10px;
        width: 0; 
        height: 0; 
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid black;
    }
    #triangle:after {
        left:10px;
        width: 0; 
        height: 0; 
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid #FFF;
        left: 57px;
        position: absolute;
        top: 38px;
        content: '';
    }

【讨论】：