CSS创建与箭头主体对齐的箭头

我需要绘制大量精确定位的水平箭头，指向左侧，右侧或两者。我不想使用HTML画布。它将全部使用JQuery动态完成，但css参数与以下大致相同，包括箭头大小和箭头粗细。CSS创建与箭头主体对齐的箭头

此代码工作得很好......

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style > 
     .ArrowHead { 
      position: absolute; 
      width: 0; 
      height: 0; 
      border-top: 4px solid transparent; 
      border-bottom: 5px solid transparent; 
      border-right: 12px solid black; 
      top:46px;left:52px; 
     } 
      .Arrow { 
      border-top:solid 1px black; 
      position: absolute; 
      top:50px;left:50px; 
      width:100px;height:1px 
     } 
    </style> 
</head> 
<body> 
    <div id="Arrow" class="Arrow"></div> 
    <div id="ArrowHead" class="ArrowHead"></div> 
</body> 
</html>

...但箭头的尖端稍微箭头的身体之上，它只是看起来的右侧正确对齐因为箭头的底部比顶部大（在400％时更容易看到）。但是，我很希望知道是否有某种方式使箭头可以垂直对称，并且仍然与箭头体完全水平地排列在一起。

来源

2014-04-05 wayfarer

你有一个打印屏幕？也许你需要根据箭头指向的位置更改保证金顶部。 – Medda86

http://jsfiddle.net/sgUnw/ –

http://www.thepixelweb.com/creating-arrows-using-css/ –

因为无法以半像素进行测量，所以当线条高度为1像素时，您将无法垂直居中箭头。如果您愿意将线宽增加到两个像素，那很容易。最好将箭头相对于线而不是视口（使用相对/绝对定位）进行定位。例如。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
      .arrow { 
      background: black; 
      width:100px; 
      height:2px; 
      position: relative; 
     } 

     .arrow::before { 
      content: ""; 
      position: absolute; 
      width: 0; 
      height: 0; 
      border-top: 5px solid transparent; 
      border-bottom: 5px solid transparent; 
      border-right: 12px solid black; 
      top:-4px; 
      left:-3px; 
     } 

     .arrow::after { 
      content: ""; 
      position: absolute; 
      width: 0; 
      height: 0; 
      border-top: 5px solid transparent; 
      border-bottom: 5px solid transparent; 
      border-left: 12px solid black; 
      top:-4px; 
      right:-3px; 
     } 
    </style> 
</head> 
<body> 
    <div class="arrow"></div> 
</body> 
</html>

来源

2014-04-05 03:19:09

我认为这是线索;我现在看到，在1像素高度线的背景下，不管它是如何创建的，垂直居中意味着某个地方有1/2像素单元，这是不可能的。因此，无论结果如何（包括我之前使用过的.png的），“下一个最好看的东西”将成为未来发展的方向。提示相对定位和::符号也是暗示的。古拉爵！ – wayfarer

CSS创建与箭头主体对齐的箭头

回答

相关问题