我正在尝试用 a 来设计 div 的样式具有向下箭头的底部边框。 div 中将包含图像，并且不应有上边框、右边框或左边框。向下箭头的填充应该与 div 相同或透明。
我已经能够使用下面的代码让它大部分工作：
.hero {
position: relative;
background-color: yellow;
height: 320px !important;
width: 100% !important;
border-bottom: 1px solid red;
}
.hero:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
<div class="hero"></div>
看看这个小提琴：http://jsfiddle.net/alisamii/tjep3h8t/ http://jsfiddle.net/alisamii/tjep3h8t/
无论我尝试做什么来“挖空”箭头，要么会导致无边框 div（因此它填充为黄色，但任何一侧都没有边框），要么会导致围绕整个 div 的边框。
有什么帮助吗？
使用 CSS3 有两种方法可以实现此目的。一种正在使用skewX在伪元素上，而另一个正在使用rotate关于伪元素。这两种方法都是也有反应.
使用倾斜：
该方法改编自网络提基的回答在this https://stackoverflow.com/questions/23758922/transparent-arrow-triangle/23759602#23759602线。它基本上使用两个伪元素（大约占容器宽度的 50%），它们向相反方向倾斜并适当定位以达到箭头形状。这些形状有边界，其中background设置为透明意味着伪元素将产生底部边框+向下箭头效果。在此示例中，箭头填充始终是透明的（或主体颜色）。
body {
background: rgb(245, 242, 242);
}
.bordered {
position: relative;
height: 200px;
width: 200px;
margin: 10px;
line-height: 200px;
}
.bordered:after,
.bordered:before {
position: absolute;
content: ' ';
height: 8px;
width: 50%;
bottom: 0px;
}
.bordered:before {
left: 0px;
border-top: 1px solid gray;
border-right: 1px solid gray;
transform-origin: left bottom;
transform: skewX(45deg);
}
.bordered:after {
right: 0px;
border-top: 1px solid gray;
border-left: 1px solid gray;
transform-origin: right bottom;
transform: skewX(-45deg);
}
.bordered img {
width: 150px;
padding: 25px;
vertical-align: middle;
}
/* Just for demo */
.bordered {
transition: all 1s;
text-align: center;
}
.bordered:hover {
height: 250px;
width: 250px;
line-height: 250px;
}
<!-- library included only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bordered">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
下面的方法将产生一个透明的三角形，使得通过三角形切口可以看到页面的背景.
body {
background: rgb(245, 242, 242);
}
.bordered {
position: relative;
height: 200px;
width: 200px;
margin: 10px;
background: rgb(200, 200, 200);
background-clip: content-box;
line-height: 200px;
overflow: hidden;
}
.bordered.top {
padding-top: 8px;
}
.bordered.bottom {
padding-bottom: 8px;
}
.bordered:after,
.bordered:before {
position: absolute;
content: ' ';
height: 8px;
width: 50%;
background: inherit;
}
.bordered.top:after,
.bordered.top:before {
top: 0px;
}
.bordered.bottom:after,
.bordered.bottom:before {
bottom: 0px;
}
.bordered:before {
left: 0px;
border-right: 1px solid gray;
}
.bordered.top:before {
border-top: 1px solid gray;
transform-origin: left bottom;
transform: skewX(45deg);
}
.bordered.bottom:before {
border-bottom: 1px solid gray;
transform-origin: left top;
transform: skewX(-45deg);
}
.bordered:after {
right: 0px;
border-left: 1px solid gray;
}
.bordered.top:after {
border-top: 1px solid gray;
transform-origin: right bottom;
transform: skewX(-45deg);
}
.bordered.bottom:after {
border-bottom: 1px solid gray;
transform-origin: right top;
transform: skewX(45deg);
}
.bordered img {
width: 150px;
padding: 25px;
vertical-align: middle;
}
/* Just for demo */
div{
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bordered top">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
<div class="bordered bottom">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
使用旋转：
该方法使用旋转的伪元素（旋转45度）实现向下箭头效果，然后放在底部的顶部border of the div。在该方法中，background伪元素的颜色设置为与div包含它。 (Note:在此示例中，图像和div有不同的填充颜色。）
body {
background: lightgray;
}
.colored {
height: 200px;
width: 200px;
position: relative;
margin: 10px;
line-height: 200px;
}
.colored img {
vertical-align: middle;
width: 150px;
padding: 25px;
}
.colored {
background: yellow;
border-bottom: 1px solid gray;
}
.colored:after {
height: 10px;
width: 10px;
position: absolute;
content: '';
background: yellow;
border: 1px solid gray;
border-top-width: 0px;
border-left-width: 0px;
transform: rotate(45deg);
bottom: -6px;
left: calc(50% - 4px);
}
/* Just for demo */
.colored{
text-align: center;
transition: all 1s;
}
.colored:hover{
height: 250px;
width: 250px;
line-height: 250px;
}
<!-- library included only to avoid prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="colored">
<img src="http://i.imgur.com/0Xqum3A.png" />
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
