参见英文答案 >
Create a triangle with CSS?6
我想用CSS创建空心三角形,但是我不怎么空洞.我可以用CSS创建三角形,但我有一个问题,这是：我不能空心这个三角形.
我想用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;
- }
解决方法
不完全是跨浏览器,但工作.希望我明白你的要求
- .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;
- }
