CSS自定义按钮[重复]答案

【问题标题】：CSS Custom Button [duplicate]CSS自定义按钮[重复]
【发布时间】：2018-12-29 03:48:16
【问题描述】：

我正在制作我的自定义弯曲按钮。但我面临一个问题，按钮的右下角没有显示边框。也许我做错了什么？我需要做一个像这样的按钮！

几乎全部完成，但右下角没有边框！

这里是代码！

.polygon .outer {
    display: inline-block;
    width: 118px;
    height: 20px;
    background: white;
    position: relative;
    color: #F94141;
  border:2px solid black;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    -webkit-clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);
    clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);
    padding: 11px 7px;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<a class="button" href="#button">
  <div class="polygon border">
    <span class="outer">
      DÉCOUVRIR
    </span>
  </div>
  </a>

</body>
</html>

试图通过剪辑路径来做！任何帮助，将不胜感激！

【问题讨论】：

据我所知，你不能用简单的 css 来做到这一点，你当然可以定义border-right-bottom-radius 来弯曲边框，但你不会得到你想要的。也许您应该考虑使用 svg/ 画布或之前和之后使用。
去掉内边距并添加border-width 10px

标签： css

【解决方案1】：

使用多边形类的背景颜色作为边框颜色。然后定位您的内部块（称为 .outer ??）并将其绝对定位在您的另一个块中。

这样你就可以剪出你想要的多边形了。

我没有完全按照你想要的方式设置它，但你会通过一些修补来解决它。

专业提示：尝试在多边形中使用尽可能多的百分比。它更清晰，并且您在调整多边形大小后不必完全重写多边形。

如果你愿意，你可以把它变成一个 scss 混合，这将使它更加灵活（例如 .outer 类的计算）

这里是制作剪辑路径的有用工具（将以百分比输出） https://bennettfeely.com/clippy/

.polygon .outer {
    display: inline-block;
    background: white;
    color: #F94141;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 70% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 70% 100%, 0 100%);
    padding: 11px 7px;
}
.polygon{
    position: relative;
    width: 132px;
    height: 20px;
    background-color: black;
    padding: 11px 7px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 70% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 70% 100%, 0 100%);
}
.outer{
  position: absolute;
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 128px; /* container height - (border thickness * 2) */
  height: 16px; /* container height - (border thickness * 2) */
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<a class="button" href="#button">
  <div class="polygon border">
    <span class="outer">
      DÉCOUVRIR
    </span>
  </div>
  </a>

</body>
</html>

【讨论】：

谢谢！但它看起来有点马车，不用担心。我现在就调整它们！谢谢你的主意！

【解决方案2】：

这是相同的小提琴，也许它会帮助你：https://jsfiddle.net/0xs8fecv/

我用过：

.polygon {
    -webkit-clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);
    clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);
    width: 135px;
    height: 46px;
    background: black;
}

.polygon .outer {
    display: inline-block;
    width: 118px;
    height: 20px;
    background: white;
    position: relative;
    color: #F94141;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    -webkit-clip-path: polygon(5px 83px, 4px 13%, 0 5px, 346px 4px, 141px 50%, 60px 76px);
    clip-path: polygon(5px 83px, 4px 13%, 0 5px, 346px 4px, 141px 50%, 60px 76px);
    padding: 11px 7px;
}

实际上，您已将边框设置为 span，它将隐藏在剪辑路径后面，因此，我只需为其父 div 和背景颜色提供另一个剪辑路径

【讨论】：

【解决方案3】：

为什么加入

 -webkit-clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);
        clip-path: polygon(0px 80px, 0px 50%, 0 0px, 290px 0px, 145px 50%, 63px 78px);

删除它，您的代码将起作用

.polygon .outer {
    display: inline-block;
    width: 118px;
    height: 20px;
    background: white;
    position: relative;
    color: #F94141;
  border:2px solid black;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
   
    padding: 11px 7px;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<a class="button" href="#button">
  <div class="polygon border">
    <span class="outer">
      DÉCOUVRIR
    </span>
  </div>
  </a>

</body>
</html>

【讨论】：

你没有仔细阅读我的问题！我要求右下角的曲线！但边界没有在那里显示！你看到透明的白色空间了吗？我也想要一个边框！