Question

我正在尝试用箭头制作横幅。我想要实现的是在整个箭头周围加上橙色边框。

请查看此fiddle。无论如何使用:before和:after为左侧和右侧执行此操作？

我尝试将边框应用于:after，但由于已经有一个边框用于制作箭头的尖端，我不知道如何通过仅使用css来实现这一点。任何帮助都会很棒，

提前致谢！

Answer 1

你可以使用渐变和背景大小来绘制箭头和边框的部分：

body {
  margin: 20px;
  font-family: Helvetica;
  background: #d4f2ff;
}

#crumbs {
  text-align: center;
 
}

#crumbs ul {
  list-style: none;
  display: inline-table;
  min-width:960px
}

#crumbs ul li {
  float:left;;
}

#crumbs ul li a {
  float: left;
  height: 50px;
  background: linear-gradient(to right, transparent 1.2em, #3498db 1.2em);
  /* leave some blank bg to draw arrow */
  text-align: center;
  padding: 30px 40px 0 80px;
  position: relative;
  margin: 0 10px 0 0;
  border-top: 2px solid orange;
  border-bottom: 2px solid orange;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
}

li+li {
  position: relative;
  margin-left: 7px;
}

li+li a:before {
  content: '';
  position: absolute;
  width: 3em;
  top: 0px;
  bottom: 0px;
  left: calc(-1em - 5px);
  background: linear-gradient(60deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.35em)top no-repeat, linear-gradient(120deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.35em)bottom left no-repeat;
  /* 2  gradients drawing end of arrow , borders and begining of next arrow */
  background-size: 100% 50%
}
li  a {/* smoothen a bit corners */
  border-radius:3px;
}
#crumbs ul li:first-child a {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-left: 2px solid orange;
  background: #3498db;/* draww full bg there is no arrows before that one */
}

#crumbs ul li:last-child a {
  padding-right: 80px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-right: 2px solid orange;
}

/* next is updates of gradients colors and bg for hover state */
#crumbs ul li:hover a:before {
 background: linear-gradient(60deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #fa5ba5  2.35em)top no-repeat, linear-gradient(120deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #fa5ba5 2.35em)bottom left no-repeat;
  background-size: 100% 50%
}

#crumbs ul li:hover +li a:before {
 background: linear-gradient(60deg, #fa5ba5 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #3498db  2.35em)top no-repeat, linear-gradient(120deg, #fa5ba5 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #3498db 2.35em)bottom left no-repeat;
  background-size: 100% 50%
}

#crumbs ul li:hover a {
  background: linear-gradient(to right, transparent 1.2em, #fa5ba5 1.2em);
}

#crumbs ul li:first-child:hover a {
  background: #fa5ba5;
}

<div id="crumbs">
	<ul>
		<li><a href="#1">One</a></li>
		<li><a href="#2">Two</a></li>
		<li><a href="#3">Three</a></li>
		<li><a href="#4">Four</a></li>
		<li><a href="#5">Five</a></li>
	</ul>
  </div>

codepen to play live with

箭头周围的边框

1 个答案: