如何在倒梯形css中创建输入字段

问题描述

我正在创建具有高级样式的搜索栏，我需要将梯形倒置div，并在其中放置输入字段。 我尝试过这个：

 .outer {
            display: inline-block;
            border-bottom: 34px solid #000;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            height: 0px;
        }

        .inner {
            display: inline-block;
            margin: 1px -18px -40px -18px;
            border-bottom: 32px solid white;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            height: 0px;
        }

        input
        {
            background: transparent;
            border: none;
            display: inline-block;
            font-size: 130%;
        }

  <span class="outer">
        <span class="inner">
          <input type="text" value="test value" />
        </span>
      </span>

但是我需要将梯形倒置，并且很像这样的图像：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）