Question

任何人都可以告诉我谁在水平线之间创造一个小V形块？请提供CSS解决方案。

Answer 1

你的意思是......就像这里：http://jsfiddle.net/uL4s74y9/

HTML：

`<div class="arrow"></div>`

CSS：

`.arrow {
    display: block;
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    z-index: 5;
}
.arrow:before{
    content: "";
    display: block;
    position: absolute;
    bottom: -20px; 
    left: 50px;
    z-index: 10;
    border: 10px #fff solid;
    border-top-color: red;
}`

Answer 2

一般概念是你使用hr元素，而V使用伪元素（例如hr:after或hr:before）并将其放在中心。

以下是行动http://codepen.io/anon/pen/LEZmgp

中的一个示例

基于此CSS Tricks demo

如何使用css在中间添加一个小块到<hr />？

2 个答案: