Question

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

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

除了使用透视变换之外，我如何制作执行以下操作的形状：

带有彩色边框和透明内部的梯形。
当用户将鼠标悬停在其上时可以改变颜色的梯形。
在形状中心放置文字的梯形。

这是我正在使用的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）支持在悬停时更改背景颜色。

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

您也可以使用SVG创建相同的形状，使用SVG时，倾斜的边看起来更加平滑。以下代码段目前仅适用于固定大小的容器。它不应该是一个问题，因为有问题的代码也有固定的维度。

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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

1 个答案: