倾斜按钮，而不是文本，在循环中答案

【问题标题】：Skew Button, not Text, in loop倾斜按钮，而不是文本，在循环中
【发布时间】：2018-10-19 01:59:32
【问题描述】：

我找到了一些答案，但没有一个涉及循环。我不确定如何将文本和按钮分开-然后将它们组合起来……奇怪的是，这是我能想到的唯一方法。但我相信你们中的一些人会立即知道这个问题的答案。

我想倾斜按钮，而不是文本。

这是 CSS：

.btn-primary-2 {
    transform: skew(-15deg);
    background: linear-gradient(to right,  yellow, red) !important;
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px !important;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
    margin: 10px 3px ;
}

这里是

<% @categories.each do |cat| %>
    <%= link_to cat.name, listings_path(:category => cat), class: "btn btn-primary-2" %>
<% end %>

我已经做了一些尝试，但没有发布它们的目的，因为它们不起作用且无关紧要。

我想倾斜按钮，而不是文本。有关如何执行此操作的任何建议？

更新：

我已经取得了进步。按钮本身不起作用，它仅在我单击文本本身时起作用。怎么贴？

<% @categories.each do |cat| %>
    <div id="btn-cat"><div id="btn-text"><%= link_to cat.name, listings_path(:category => cat, class: "btn btn-cat") %></div></div>
<% end %>

我使用了“button_to”而不是 link_to，但它以某种方式转到与 link_to 相同的链接，但收到诸如“参数丢失或值为空：列表”之类的错误 - 我最近更改了我的模型/控制器和我仍在努力.. 但无论如何，另一个链接与 link_to 一起使用（转到相同的 url）

【问题讨论】：

在span 中写入文本，因为文本在 div 中，所以它会占用父属性。
如果我将 btn-cat 更改为跨度，则没有任何变化。如果我将 btn-text 更改为 span，则该文本将采用 btn-cat 的类和 skews.... 还是我误会了您所说的？

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

这里我写了示例代码，希望对你有帮助。

.btn-primary-2 {
  transform: skew(-15deg);
  background: linear-gradient(to right, yellow, red) !important;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px !important;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  margin: 10px 3px;
}

.btn-primary-2 span {
  display: block;
  transform: skew(15deg);
}

<div class="btn-primary-2">
  <span>SENDHERE</span>
</div>

【讨论】：