如何在css中创建空心三角形

参见英文答案 > Create a triangle with CSS?6
我想用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;
}

解决方法

不完全是跨浏览器,但工作.希望我明白你的要求

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

原文地址：https://www.jb51.cc/css/216348.html