时间戳

首页 > 解决方案 > 带渐变和尖端的动态高度按钮

css - 带渐变和尖端的动态高度按钮

问题描述

我想创建带有渐变作为背景的按钮和一个尖端，它将调整到按钮的高度，这取决于里面的文本量。页面背景可能会有所不同，所以我不能使用纯色作为尖端。我想出的最好的解决方案是使用带有svg代码的伪元素作为背景图像，将背景高度设置为100%，但是这个解决方案并没有让我太满意，因为我不知道它是否看起来适用于所有现代浏览器。你有什么想法？也许我应该使用Javascript？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Button example</title>
  <style>
    html, body {
      height: 100%;
    }

    body {
      background-color: #e5e5e5;
    }

    .wrapper {
      background-color: #ffffff;
      padding: 15px;
      max-width: 180px;
      margin: 0 auto;
    }

    .btn {
      position: relative;
      display: inline-block;
      background: #000000 linear-gradient(to bottom, #000000, #666666);
      color: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      padding: 8px 20px;
      margin-right: 12px;
      margin-bottom: 15px;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    .btn::after {
      content: '';
      position: absolute;
      top: 0px;
      right: -12px;
      display: inline-block;
      height: 100%;
      width: 13px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='40'%3E%3ClinearGradient id='css-btn-example' gradientUnits='userSpaceOnUse' x1='6.5' y1='40' x2='6.5'%3E%3Cstop offset='0' stop-color='%23666'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23css-btn-example)' d='M0 0h1l12 20L1 40H0z'/%3E%3C/svg%3E");
      background-size: 13px 100%;
    }

    .btn:last-child {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="btn">One line</div>
    <div class="btn">Two line button example</div>
    <div class="btn">Three line button long example</div>
  </div>
</body>
</html>

想要的效果

标签： css

解决方案

如果渐变总是从上到下（或从下到上），您可以考虑使用如下所示的倾斜技巧。这个想法是使用伪元素，您可以在其中应用两个不同的渐变，这些渐变将以相同的颜色相交，从而产生一种渐变的错觉。

.box {
  width: 150px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  color: #fff;
  z-index: 0;
  overflow: hidden;
  margin:5px;
  border-radius:5px 0 0 5px;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  z-index:-1;
  height: 50%;
  left: 0;
  right: 0;
}

.box:before {
  top: 0;
  background: linear-gradient(to bottom, blue, #4100bf);
  transform: skewX(30deg);
  transform-origin: bottom right;
}

.box:after {
  bottom: 0;
  background: linear-gradient(to top, purple, #4100bf);
  transform: skewX(-30deg);
  transform-origin: top right;
}
<div class="box">
  Some text here
</div>
<div class="box">
  Some text here Some text here
</div>

另一个没有透明度的想法是考虑多重背景并用白色（或背景的任何颜色）隐藏渐变。然后，您可以考虑任何类型的渐变，甚至是径向渐变。

.box {
  width: 150px;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  margin:5px;
  background:
    linear-gradient(to bottom right,transparent 48%,#fff 50%) bottom right/20px 50%,
    linear-gradient(to top right,transparent 48%,#fff 50%) top right/20px 50%,
    linear-gradient(to bottom, blue,purple);
  background-repeat:no-repeat;
  border-radius:5px 0 0 5px;
}
<div class="box">
  Some text here
</div>
<div class="box">
  Some text here Some text here
</div>

您还有剪辑路径解决方案：

.box {
  width: 150px;
  padding: 20px;
  box-sizing: border-box;
  color: #fff;
  margin: 5px;
  background: linear-gradient(to bottom, blue, purple);
  background-repeat: no-repeat;
  border-radius: 5px 0 0 5px;
  -webkit-clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 50%, calc(100% - 20px) 100%, 0% 100%);
}
<div class="box">
  Some text here
</div>
<div class="box">
  Some text here Some text here
</div>

推荐阅读