Question

我正在尝试创建一个带有矩形边框的V形图案，使用CSS作为“按钮”来转换幻灯片，但是如果没有倾斜，我会在平行四边形出现的位置得到一个矩形。

如何摆脱这个垂直矩形，或至少隐藏它或使其与边框颜色相同？

以下是我从网上抓取的图片的样子：http://jsfiddle.net/splunge/nmq3ayqk/

由于

<img src="http://unsplash.imgix.net/reserve/wpYap0TYQ3mElk0kRbYn_LagunaHIke.jpg?fit=crop&fm=jpg&h=345&q=75&w=960">
<a tabindex="0" title="Previous Slide" alt="Previous Slide" id="slideshow-prev" href=""></a>


#slideshow-prev:before {
    background: none repeat scroll 0 0 rgba(127, 127, 127, 0.3);
    content: "";
    height: 50%;
    left: 0;
    position: absolute;
    top: 0;
    transform: skew(-25deg, 0deg);
    width: 100%;
}
#slideshow-prev:after {
    background: none repeat scroll 0 0 rgba(127, 127, 127, 0.3);
    content: "";
    height: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: skew(25deg, 0deg);
    width: 100%;
    z-index: -1000;
}
#slideshow-prev {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: rgba(127, 127, 127, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
    border-image: none;
    border-style: solid;
    border-width: 135px 20px 136px;
    height: 70px;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 2px;
    position: absolute;
    top: 0;
    width: 10px;
    z-index: 10;
}

Answer 1

您看到的矩形是标识为#slideshow-prev的标记。

您可以通过对该ID的选择器进行一些小的更改以及对伪元素的定位进行一些调整来修复您正在做的事情的美学。但是，根据您的使用情况，最好考虑重新格式化HTML以及用于创建样式的元素。更多关于代码的内容。

http://jsfiddle.net/nmq3ayqk/3/

<强> CSS：

#slideshow-prev:before {
    background: none repeat scroll 0 0 rgba(127, 127, 127, 0.3);
    content: "";
    height: 25px;
    left: 0;
    position: absolute;
    bottom: 0;
    transform: skew(-25deg, 0deg);
    width: 100%;
}
#slideshow-prev:after {
    background: none repeat scroll 0 0 rgba(127, 127, 127, 0.3);
    content: "";
    height: 25px;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(25deg, 0deg);
    width: 100%;
    z-index: -1000;
}
#slideshow-prev {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: rgba(127, 127, 127, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
    border-image: none;
    border-style: solid;
    border-width: 135px 20px 136px;
    height: 0px;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 10px;
    z-index: 10;
}

通过在：before和：after之间设置固定高度，并将#slideshow-prev的高度和填充设置为0，我们可以重新调整角度并摆脱框。

我还建议根据你的情况做两件事来遵循最佳实践......

如果这些下一个和上一个按钮正在控制滑块，而不是实际控制某个地方的LINK，则不要使用<a>元素。使用其他内容，例如<div>或<button>。

如果它们实际上是LINKS，那么您应该默认元素的样式，并将此花哨样式应用于<span>元素内的<a> / s。

Answer 2

太慢了！但我采取了与迈克尔略有不同的方法。中心框确实是您的slideshow-prev元素。由于颜色是由边框创建的，因此元素本身具有不同的背景颜色。

我建议使用元素本身作为条形（不是元素的边框），然后使用百分比定位V形符号，以便进行缩放。

Fiddle

#slideshow-prev:before {
    background: none repeat scroll 0 0 rgba(127, 127, 127, 0.3);
    content: "";
    height: 10%;
    left: 40%; /* position as percentages for scaling */
    position: absolute;
    top: 45%;
    transform: skew(-25deg, 0deg);
    width: 25%;
    border: none;
}
#slideshow-prev:after {
    background: none repeat scroll 0 0 rgba(127, 127, 127, 0.3);
    content: "";
    height: 10%;
    position: absolute;
    left: 40%;
    top: 55%;
    transform: skew(25deg, 0deg);
    width: 25%;
    z-index: -1000;
}
#slideshow-prev {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
    border-image: none;
    /* border-style: solid; */
    /* border-width: 135px 20px 136px; <- remove border elements, as it could screw up other width/height calculations */
    height: 100%;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 2px;
    position: absolute;
    top: 0;
    width: 50px;
    z-index: 10;
}

Answer 3

我创建了这个仅CSS的V形符号（左反转箭头和右箭头）：http://jsfiddle.net/RCzAt/195/

<div class="box"></div>

.box {
    position: relative;
    display: block;
    margin: 30px;
    width: 60px;
    height: 32px;
    background: #000000;
}
.box:before {
    content: '';
    z-index: -1;
    position: absolute;
    left: -9px;
    top: 0px;
    display: block;
    border-right: 9px solid transparent;
    border-top: 16px solid #000000;
    border-bottom: 16px solid #000000;
    transform: rotate(180deg);
}
.box::after {
    content: '';
    z-index: -1;
    position: absolute;
    right: -9px;
    top: 7px;
    display: block;
    width: 18px;
    height: 18px;
    transform: rotate(45deg) skew(15deg,15deg);
    background: #000000;
}

CSS雪佛龙显示不需要的矩形

3 个答案: