如何使用css将边框弯曲成轻微的新月形？

Question

#chevron {
      position: relative;
      text-align: center;
      padding: 12px;
      margin-bottom: 6px;
      height: 60px;
      width: 200px;
      border:1px solid red;
    }
    
    #chevron:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 20%;
      width: 100%;
      background: red;
      transform: skew(0deg, 0);
    }

<div id="chevron"></div>

我尝试过，但没有按预期工作。

Answer 1

我将使用border-radius而不是偏斜。调整border-bottom-left-radius和border-bottom-right-radius的值以调整月牙的顶点。

div {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  border:1px solid red;
  border-top: 0px;
  float: left;
  margin: 5px;
}

#chevron-1 {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
  border:1px solid red;
  border-top: 0px;
}

#chevron-2 {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 100px;
  width: 100px;
  border:1px solid red;
  border-top: 0px;
}


div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 20%;
  width: 50%;
  border-bottom-left-radius: 100%;
  border-bottom: 1px solid red;
}

div::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 20%;
  width: 50%;
  border-bottom-right-radius: 100%;
  border-bottom: 1px solid red;
}

<div id="chevron-1"></div>

<div id="chevron-2"></div>

Answer 2

将#chevron::after伪元素放在#chevron::before元素的上方，给#chevron::after白色背景色，并在两个伪元素上使用border-radius使其弯曲新月。

#chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
  border:1px solid red;
}

 #chevron::before {
   content: '';
   position: absolute;
   top: -8px;
   left: -1px;
   height: 25%;
   width: 101%;
   background: red;
   border-radius: 70%;
}

#chevron::after {
   content: '';
   position: absolute;
   top: -10px;
   left: -2px;
   height: 25%;
   width: 102%;
   background: #fff;
   border-radius: 100%;
}

<div id="chevron"></div>