2016-07-24 153 views
-2

我只是做一个箭头在CSS中使用此代码:问题接壤

 .icon{ 
 
      height: 0; 
 
      width: 0; 
 
      border: solid transparent; 
 
      border-width: 10px; 
 
      border-left-color: aquamarine; 
 
      border-top-color: saddlebrown; 
 
      border-right-color: salmon; 
 
      border-bottom-color: steelblue; 
 
     }
<div class="icon"></div>

正确的三角形:

correct triangles

和结果是4个正确的三角形 但是当我使用相同的代码在其他地方的结果看起来像下面的图片,划分框的宽度和高度是不一样的。

不正确的三角形:

incorrect triangles

+1

别的地方意味着你在哪里使用? – Sree

+0

在**其他地方**有一条规则覆盖你的* .icon *'height:0;'规则。 – dNitro

+0

我在另一个文件中编写了完全相同的代码!包含'height:0;' – saru

回答

0

您应该只是工作wtih Positions,使该widthheight作品...

0

试试这个速记代码。 只是根据你的喜好改变你的颜色/样式/边框的宽度。

.icon{ 
    border-color: yellow blue red green; 
    border-style: solid; 
    border-width: 200px 200px 200px 200px; 
    height: 0px; 
    width: 0px; 
} 
+0

实际上,他只是在其他地方为这个div设置了一些填充。见[this](https://jsfiddle.net/zcqvbhLv/) –

+0

@Mark Perera嗯...你是对的... – Lucky

0

取消已设置填充别处

.icon{ 
    ... 
    padding: 0; 
    ... 
}