带边框和居中文本的透明梯形按钮

Question

我正在设计一个梯形至关重要的网站。我正在使用以下代码来实现我正在寻找的效果，但是遇到了问题：http://jsfiddle.net/9n9uh6f6/9/

最大的问题是鼠标悬停区域（因为我使用透视变换，可点击区域是倾斜的）和形状内的居中文本。

除了使用透视变换之外，我如何制作具有以下功能的形状：

1. 带有彩色边框和透明内部的梯形。
2. 当用户将鼠标悬停在梯形上时可以改变颜色。
3. 在形状中心包含文本的梯形。

这是我正在使用的 CSS：

.prodcaptions {
  width:136px;
  height: 85px;
  position:relative;
  left:10%;
  text-transform:uppercase;
  text-align:center;
  letter-spacing: 1.6px;
  color: #000;
}
.prodcaptions:before {
  content:"";
  position:absolute;
  border-radius:1px;
  box-shadow:0 0 0 3px #27628e;
  top:-5%;
  bottom:-11%;
  left:-1%;
  right:-5%;
  -webkit-transform:perspective(40em) rotateX(-45deg);
  transform:perspective(40em) rotateX(-45deg);
}

.prodcaptions a {
  z-index:999;
  position:relative;
  height: 85px;
  display: block;
  padding-top: 25px;
}

Answer 1

对于这种情况，最好使用倾斜变换来生成形状，而不是使用透视旋转。

我们可以通过使用两个向相反方向倾斜的伪元素来实现形状，然后将一个放在左角，另一个放在右角。由于只有伪元素是倾斜的，而不是主容器，所以文本保持在其预期的位置（在中心-中间）。

此形状可以 (a) 支持动态宽度 (b) 具有带透明背景的彩色边框 (c) 使文本位于形状的中心并且 (d) 支持悬停时更改背景颜色。

.trapezoid {
  display: inline-block;
  position: relative;
  height: 100px;
  width: auto;
  color: #27628e;
  border-top: 2px solid #27628e;
  border-bottom: 2px solid #27628e;
  line-height: 100px;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin: 15px 250px; /* Just for demo */
}
.trapezoid:after,
.trapezoid:before {
  position: absolute;
  content: '';
  top: -2px;
  height: 100%;
  width: 50%;
  z-index: -1;
}
.trapezoid:before {
  left: 0px;
  border-left: 2px solid #27628e;
  border-top: 2px solid #27628e;
  transform-origin: left bottom;
  transform: skew(10deg);
}
.trapezoid:after {
  right: 0px;
  border-right: 2px solid #27628e;
  border-top: 2px solid #27628e;
  transform-origin: right bottom;
  transform: skew(-10deg);
}
.trapezoid:hover,
.trapezoid:hover:after,
.trapezoid:hover:before {
  background: #27628e;
  color: white;
}

/* Just for demo */

body {
  background: linear-gradient(90deg, aliceblue, powderblue);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a href='#' class="trapezoid">Click Me!!!</a>

---

您也可以使用 SVG 创建相同的形状，并且在使用 SVG 时，倾斜的边看起来更平滑一些。下面的 sn-p 当前仅适用于固定大小的容器。这应该不是问题，因为有问题的代码也有固定的尺寸。

.vector {
  position: relative;
  height: 100px;
  width: -webkit-calc(100px * 1.36);
  width: calc(100px * 1.36);
  line-height: 100px;
  margin: 0px auto; /* Just for demo */
}
svg {
  height: 100%;
  width: 100%:
}
polygon {
  fill: transparent;
  stroke-width: 2;
  stroke: steelblue;
}
.vector a {
  position: absolute;
  display: block;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: steelblue;
  text-align: center;
  white-space: nowrap;
}
.vector:hover polygon {
  fill: steelblue;
}
.vector:hover a {
  color: white;
}

/* Just for demo */
body{
  background: linear-gradient(90deg, aliceblue, powderblue);
}

<div class='vector'>
  <svg viewBox='0 0 136 100' preserveaspectratio='none'>
    <polygon points='1,2 18,98 118,98 135,2' />
  </svg>
  <a href='#'>Click Me!!!</a>
</div>