带线和弦的圆圈CSS

Question

我需要用 CSS 制作一个印章，里面有文本和 2 条线和弦。 如图所示，邮票是圆形的。 邮票 有半径和直径的教程，但我还没有找到弦的教程..

这些是我当前的CSS代码：

.circle
{
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 200px;
height: 200px;
border-radius: 250px;
font-size: 30px;
color: black;
text-align: center;
background: #000;
border: solid black 1px;
background: linear-gradient(to top, white 49%, black 50%, white 50%),
  linear-gradient(to bottom, white, black 60%, white 50%);
}

对于 html：

<div class="circle">
<div>VAN</div>
<div>DATES</div>

</div>

我使用线条渐变来创建水平线，但我需要两条线。

Answer 1

尝试使用

div

并修改其伪元素

::before

和

after

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.parent {
  position: relative;
  border: 1px solid #e5e5e5;
  border-radius: 100px;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

span {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5em;
}

.parent::before,
.parent::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #e5e5e5;
}

.parent::before {
  top: 26px;
}

div::after {
  top: 52px;
}

<div class="parent">
  <div class="child">
    <span>This</span>
    <span>Is</span>
    <span>Stamp</span>
  </div>
</div>