如何垂直对齐div并添加直角三角形？

Question

我正在尝试创建UI元素：

这是我到目前为止所拥有的。

HTML

<div class="indicator-container">
  <div class="indicator-left-arc"></div>
  <div class="indicator-number-container">
    <div class="indicator-number">1</div>
  </div>
  <div class="indicator-text">Section Description</div>
  <div class="indicator-point"></div>
</div>

SCSS

$indicator-height: 40px;
$light-blue: #90CEF8;
$circle-size: 30px;

div {
    display: inline-block;
    height: $indicator-height;
    line-height: $indicator-height;
    font-size: 0;
    text-align: center;
}

.indicator-container:before {
    vertical-align: middle;
}

.indicator-left-arc, .indicator-number-container, .indicator-text, .indicator-point {
    background: $light-blue;
}

.indicator-left-arc {
    width: $indicator-height / 2;
    border-bottom-left-radius: $indicator-height;
    border-top-left-radius: $indicator-height;
}

.indicator-number {
    background-color: white;
    border-radius: 50%;
    color: #717171;
    height: $circle-size;
    width: $circle-size;
    line-height: $circle-size;
    text-align: center;
    font-size: $circle-size * .9;
    margin-right: 10px;
}

.indicator-text {
    font-size: 14px;
    font-weight: normal;
    word-wrap: normal;
}

.indicator-point {
    width: 0; 
    height: 0; 
    border-bottom: 10px solid transparent;  /* left arrow slant */
    border-top: 10px solid transparent; /* right arrow slant */
    border-left: 10px solid $light-blue; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

CodePen

目标：

1. 实现垂直对齐的div
2. 缩短文本div，并允许在单词之间切换
3. 成功实现直角三角形
4. 将数字圆向左圆弧div插入，如图所示

Answer 1

如何用更少的代码来实现更简单的方法：

public function search_addSalaryrecord()
{
  $employee_id  = trim($this->input->post('employee_id'));
  if(!empty($employee_id))
  {
    $arr_result = $this->Employee_model->get_salary_search_emp_id($employee_id);
    if (! empty($arr_result))
    {
        foreach ($arr_result as $row)
        {
          $result[] = array(
              "name" => $row->firstname.' '.$row->lastname,
              "mobileno" => $row->mobileno,
              "email_id" => $row->email_id,
            );
        }
        $respnonse['status'] = 'success';
        $respnonse['records'] = $result;
    } 
    else
    {
        $respnonse['status'] = "error";
        $respnonse['records'] = "No record found";
    }
  }
  echo json_encode($respnonse);
  exit;
}

:root {
 --d:50px; /*width of the triangle*/
}
.box {
  display:inline-flex;
  align-items:center;
  color:#fff;
  width:calc(120px + var(--d));
  height:60px;
  padding:10px var(--d) 10px 10px;
  border-radius:50px 0 0 50px;
  background:
   linear-gradient(to top right,#90CEF8 49%,transparent 50%) top right/var(--d) 50%,
   linear-gradient(to bottom right,#90CEF8 49%,transparent 50%) bottom right/var(--d) 50%,
   linear-gradient(#90CEF8,#90CEF8) left/calc(100% - var(--d)) 100%;
  background-repeat:no-repeat;
}
.box:before {
  content:attr(data-number);
  text-align:center;
  font-size:30px;
  width:45px;
  flex-shrink:0;
  padding:5px 0;
  color:#717171;
  background:#fff;
  border-radius:50%;
  margin-right:5px;
}
* {
  box-sizing:border-box;
}

Answer 2

.indicator-container {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #90CEF8;
  height: 40px;
  width: max-content;
  padding: 0 5px;
  transform: translateX(40px);
}
.indicator-container:before {
  content:'';
  background: #90CEF8; 
  position: absolute;
  bottom: 0;
  left: -20px;
  width: 20px;
  height: 40px;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
}
.indicator-container:after {
    content: '';
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid #90CEF8;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.indicator-container span {
  display: inline-block;
}
.indicator-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 50%;
    color: #717171;
    height: 30px;
    width: 30px;
    font-size: 27px;
    transform: translateX(-20px);   
}

<div class="indicator-container">
    <div class="indicator-number">1</div>
    <span>Section Description</span>
</div>