如何创建按钮的延长线答案

【问题标题】：How to create line extension of a button如何创建按钮的延长线
【发布时间】：2022-01-12 08:29:30
【问题描述】：

我想问这是否可能，我正在尝试实现这个设计具有按钮/或<a>标签的曲线延伸。我的第一个选择是导出此行图像并将其插入到按钮之后。但是有没有任何 CSS 样式可以使这成为可能，

任何建议将不胜感激！谢谢

【问题讨论】：

可以使用定位的伪元素来完成，该元素具有border-bottom 和-right 集，以及边框半径。
是的@CBroe，我从没想过这是可能的。我已经尝试了很多次，但我想我需要提高我的 CSS 技能。呵呵

标签： html css button sass frontend

【解决方案1】：

这当然是可能的，我只是不确定这是否可取。无论如何，您可以使用绝对定位的伪元素，但与绝对定位一样，在响应性方面您必须小心。在示例中，我使用了很多我不太喜欢的幻数。

我可能更愿意使用 JavaScript 和 SVG 来使线条在所有设备上正确定位/调整大小。

无论如何，这是一个 CSS 解决方案：

body {
  padding: 200px 50px;
}

button {
  position: relative;
  background-color: #92701b;
  border-radius: 999px;
  font-size: 1rem;
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 14px 25px;
  letter-spacing: 0.5px;
}

button:after {
  content: "";
  position: absolute;
  bottom: 21px;
  left: 100%;
  width: 200px;
  height: 200px;
  border-radius: 0 0 30px 0;
  border: 4px solid #d76f46;
  border-top: none;
  border-left: none;
}

&lt;button&gt;Polyethylene&lt;/button&gt;

【讨论】：

哇，@Mihi 你让它成为可能非常感谢你，这比我想的要好，你介意是否可以使用 javascript 分享你的解决方案吗？但如果这对我真的有帮助的话。
如果直线在底部呢？，我尝试将 height 属性设为负数，但它不起作用，知道吗？
不客气@cdt！我不确定我是否理解正确，但是将这些属性添加到 :after 元素应该可以做到：``` bottom: 0;左：计算（100% - 20px）； z 指数：-1； ```我今天晚些时候会尝试发布一个JS解决方案
酷我稍后再试@Mihi，我之前在 :after element ""transform: rotate(270deg);"" 之前尝试过这个属性，然后它可以工作，我不知道是否这很好，但我想这不是一个好习惯。也许你的答案更好，我需要试试这个。
谢谢@mihi，期待你的JS解决方案。