如何在CSS中创建菱形（虚线）边框底部

Question

我想在CSS中创建菱形底边框，这可能吗？谁能帮我吗？

    .entry-meta:after {
    width: 40%;
    content: '';
    display: block;
    border-bottom: 2px solid #eee;
    padding-top: 10px;
    margin: .25rem auto .5rem;
    margin-bottom: 35px;
}

Answer 1

对于conic-gradient()

来说，这是一项简单的任务

h1 {
  display:table;
  margin:80px auto 0;
  font-size:59px;
  color:#fff;
  padding-bottom:30px;
  background:
    repeating-conic-gradient(
     transparent  0     45deg,
     currentColor 46deg 135deg,
     transparent  136deg 180deg) 
    -15px 100% /* -15px is half the size */
    /30px 30px /* adjust this to control the size*/ 
    repeat-x;
}

body {
  background:lightblue
}

<h1>Title here</h1>

Answer 2

您可以使用单个图像，而在背景中只需将其重复到X；

h1 {
  font-size: 80px;
  position: relative;
  display: inline-block;
}
body {
  background-color: skyblue;
}

h1:after {
      content: "";
    height: 20px;
    width: 98%;
    display: block;
    background-image: url(https://i.ibb.co/7QqJ1Nr/wefw.png);
    background-size: contain;
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
}
}

<h1>Article title</h1>