使用CSS自定义形状

Question

对于菜单，我想使用纯CSS设计自定义形状。

形状应如下所示：

这是我尝试使用:before和:after

的方法

h5:before{
	border-color: #dbb900;
	padding: 0px 5px;
	border-left: 2px solid #2f3539;
	border-right: 2px solid #2f3539;
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	bottom: 0px;
	height: 10px;
	width: 2px;
	margin: 15px auto 0px;
	right: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h5:after{
	border-right: 2px solid #2f3539;
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	bottom: 0px;
	height: 10px;
	width: 2px;
	margin: 15px auto 0px;
	right: 0px;
	opacity: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

<h5>My title</h5>

我在这里缺少什么？

谢谢。

Answer 1

我想您主要是在谈论您添加到:before和:after的那些边界的位置。

---

首先，当您使用position: absolute;时，它将相对于某些元素是绝对的。

当前，它与整个文档有关。

如果您说h5 { position: relative; }，:before和:after会将其相对于h5的位置与各自的绝对位置相对应。

---

完成上述操作后，您发现h5跨越了文档的整个宽度。

这是因为h5默认为display: block;。 display: inline-block;在这种情况下会更合适。

查看下面的代码段。

h5:before{
	border-color: #dbb900;
	padding: 0px 5px;
	border-left: 2px solid #2f3539;
	border-right: 2px solid #2f3539;
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	bottom: 0px;
	height: 10px;
	width: 2px;
	margin: 15px auto 0px;
	right: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h5:after{
	border-right: 2px solid #2f3539;
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	bottom: 0px;
	height: 15px; /*10px;*/
	width: 2px;
	margin: 15px auto 0px;
	right: 0px;
	/*opacity: 0;*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h5 {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}

<h5>My title</h5>

Answer 2

这是一个只有一个元素且没有复杂代码的简便方法：

.element {
  font-size:30px;
  display:inline-block;
  padding-bottom:30px; /*to control the space of the lines under the text*/
  background:
    linear-gradient(blue,blue) 50% 100%/2px 20px, /*middle line [width:2px height:20px]*/
    linear-gradient(blue,blue) calc(50% - 5px) calc(100% - 5px)/2px 15px, /*left line [width:2px height:15px]*/
    linear-gradient(blue,blue) calc(50% + 5px) calc(100% - 5px)/2px 15px; /*right line [width:2px height:15px]*/
  background-repeat:no-repeat;
}

<div class="element">some Text</div>

Answer 3

您可以在pseudo-elements上将box-shadow与: The Navigation Section element组合使用

nav{
  
}
nav ul{
    text-align: center
}
nav li{
    display: inline-block;
    margin: 10px 12px;
}
nav a{
    color: black;
    position : relative;
    display: block;
    text-decoration: none;
    padding: 6px 10px
}
nav a:before,
nav a:after{
  content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    background: currentcolor;
    color: orange;
    top: 100%;
}
nav a:before{ 
    margin-left: -1px;
    height: 32px;
}
nav a:after{ 
    margin-left: -10px; 
    height: 20px;
    box-shadow: 18px 0 0 0 currentColor;
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>