Как создать ромбовидную (пунктирную) границу дна в 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

вы можете использовать одно изображение, а в фоновом режиме просто повторите его до 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>

Answer 2

Это простая задача для 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>