我试着用CSS创建一个三角形,它看起来不错,但我现在有一个问题,在一个框后实现它。
看看我的例子,你会看到我的意思:
它似乎像.Box的三角形被“切断”,我完全不知道为什么这种情况发生。
我想让它看起来像.arrow。
我试图改变盒子的尺寸,三角形等,但没有工作。
p.s.这里是css如果Jsfiddle是慢或不再可用:
- .Box{
- background:red;
- height:40px;
- width:100px;
- }
- /*the triangle but its being cut off*/
- .Box:after{
- content:"";
- width:0;
- height:0;
- border-top:20px solid transparent;
- border-bottom:20px solid transparent;
- border-left:20px solid green;
- }
- /*the triangle how it should look like*/
- .arrow{
- width:0;
- height:0;
- border-top:20px solid transparent;
- border-bottom:20px solid transparent;
- border-left:20px solid green;
- }