Html5 路径对齐问题阿拉伯语版本

Question

我需要像这样制作菜单标签

http://codepen.io/chriscoyier/pen/tsouG

但是我需要左边而不是右边的 flex 部分我尝试在路径代码中进行编辑但是它不起作用任何人都可以帮忙吗？

 <div class="banner">
            <div class="wrap">
                <div class="cssmenu">
                    <nav class="main-nav" id="main-nav">

  <a href="" class="videos">
    <svg viewBox="0 0 100 25" class="shape-tab">
      <use xlink:href="#shape-tab"></use>
    </svg>
    <span></span>
  </a>

  <a href="../ArabicNewLogin.aspx" class="almanac">
    <svg viewBox="0 0 100 25" class="shape-tab">
      <use xlink:href="#shape-tab"></use>
    </svg>
    <span>الرئيسيه</span>
  </a>
  <a href="../ArabicTal2aLogin.aspx" class="snippets">
    <svg viewBox="0 0 100 25" class="shape-tab">
      <use xlink:href="#shape-tab"></use>
    </svg>
    <span>عميل طلقه</span>
  </a>
  <a href="../ArabicFAQs.html" class="forums">
    <svg viewBox="0 0 100 25" class="shape-tab">
      <use xlink:href="#shape-tab"></use>
    </svg>
    <span>التعليمات</span>
  </a>



</nav>
         </div>
                <div class="lang">
                    <a class="btn btn-primary btn1" href="../NewLogin.aspx">انجليزى</a> <a class="btn btn-primary bt"
                        href="../ArabicNewLogin.aspx">عربى</a>
                </div>
            </div>
        </div>

 <svg class="hide">

  <defs>
  <path id="shape-tab" d="M100,25C79.568,25,84.815,0,59.692,0H11.149C5.027,0,0,4.634,0,10.385V25"></path>


  </defs>

</svg>

这是我到目前为止的努力

http://codepen.io/anon/pen/rIAlc

Answer 1

这里:

我还改进了您的原始版本。现在都是相对的，所以您只需提供第一个坐标 (M116.486,29.036)，其余坐标将相对于该点绘制:

• 原件: http://codepen.io/anon/pen/jouHh
• 镜像: http://codepen.io/anon/pen/dGcfb

---

更新

哦，我现在明白我应该使用你问题中的代码，而不是代码笔 例子。将您自己的代码放在来自 开始，这几乎使我的第一个解决方案变得毫无用处。

但又来了。
我再次改进了你原来的路径，所以更容易镜像:

原创( http://codepen.io/anon/pen/pwzfB ):

<path id="shape-tab" d="M100,25 
                        c-20.432,0 -15.185,-25 -40.308,-25 
                        h-48.543 
                        c-6.122,0 -11.149,4.634 -11.149,10.385 
                        v25
                        z" />

镜像( http://codepen.io/anon/pen/dGJxw ):

<path id="shape-tab" d="M0,25 
                     c20.432,0 15.185,-25 40.308,-25 
                     h48.543 
                     c6.122,0 11.149,4.634 11.149,10.385 
                     v25
                     z" />