带边框和居中文本的透明梯形按钮
带边框和居中文本的透明梯形按钮
提问于 2014-10-13 14:01:20
我在设计一个梯形是关键的地方。我正在使用下面的代码来实现我想要的效果，但是它有问题：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;
}回答 1
Stack Overflow用户
发布于 2015-05-08 16:09:44
在这种情况下，使用斜变换来生成形状要比使用透视图旋转更好。
我们可以使用两个向相反方向倾斜的伪元素来实现形状，然后定位一个在左角，另一个在右角。因为只有伪元素是倾斜的，而不是主容器，所以文本保持在它预期的位置(中间-中间)。
该形状可以(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时，角度看起来更平滑一些。下面的代码段目前只适用于固定大小的容器。这不应该是一个问题，因为有关的代码也有固定的维度。
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26341860
复制相关文章
相似问题
腾讯云开发者
