html - 如何垂直对齐div并添加直 Angular 三 Angular 形？

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. 成功实现直 Angular 三 Angular 形
4. 如图所示将数字圆圈向左插入左侧弧形div

Answer 1

用更少的代码更简单的方法怎么样:

: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;
}

<div class="box" data-number="6">
Some text here
</div>

<div class="box" data-number="7" style="--d:30px">
Another text here
</div>