可以使用 CSS 创建以下边框模式吗？

Question

我想添加如下边框图案：

div {
  border: 1px solid #ddd;
  position: relative;
  height: 150px;
  text-align: center;
  margin-top: 3em;
}
ul {
  padding: 0;
  position: absolute;
  top: -55px;
  left: 0;
  right: 0;
}
li {
  display: inline-block;
}
h3 {
  background: #fff;
  padding: 10px 20px;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
}

<div>
  <ul>
    <li><h3>Test</h3><span>Test<br/>Test<br/>Test</span></li>
    <li><h3>Test</h3><span>Test<br/>Test<br/>Test</span></li>
    <li><h3>Test</h3><span>Test<br/>Test<br/>Test</span></li>
    <li><h3>Test</h3><span>Test<br/>Test<br/>Test</span></li>
  </ul>
</div>

http://jsfiddle.net/dsec1bco/

是否可以用纯 CSS 创建此边框图案？

Answer 1

使用 Pure CSS 是可能的，您必须尝试使用如下形状：https://css-tricks.com/examples/ShapesOfCSS/

另一个简单的选择是将这些箭头的图像作为 :before 和 :after

Answer 2

这里有一些代码可以为您说明一种可能的方法（虽然略有不同）：

HTML

<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>

CSS

#crumbs {
  text-align: center;
}
#crumbs ul {
  list-style: none;
  display: inline-table;
}
#crumbs ul li {
  display: inline;
}
#crumbs ul li a {
  display: block;
  float: left;
  height: 50px;
  background: #3498db;
  text-align: center;
  padding: 30px 40px 0 80px;
  position: relative;
  margin: 0 10px 0 0;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
}
#crumbs ul li a:after {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #3498db;
  position: absolute;
  right: -40px;
  top: 0;
  z-index: 1;
}
#crumbs ul li a:before {
  content: "";
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 40px solid #d4f2ff;
  position: absolute;
  left: 0;
  top: 0;
}
#crumbs ul li:first-child a {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
  display: none;
}
#crumbs ul li: last-child a {
  padding-right: 80px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
#crumbs ul li: last-child a:after {
  display: none;
}
#crumbs ul li a:hover {
  background: #fa5ba5;
}
#crumbs ul li a:hover:after {
  border-left-color: #fa5ba5;
}

可以使用 CSS 创建以下边框模式吗？

It is possible to use CSS to create the following border pattern?

css

border

HTML

CSS