使用 css 设计自定义箭头

Question

我正在尝试设计这个箭头的样式，但我一直无法得到这个确切的样式。

here is image of what i want to achieve

here is image of what i am getting

HTML代码：

<div className="arrow-div">
      <p>2. Summary</p>
    </div>

CSS代码：

.arrow-div {
width: 209px;
height: 56px;
display: inline-flex;
margin: 54px 10px;
border: 1px solid #d2d6dc;
clip-path: polygon(75% 0%, 84% 50%, 75% 100%, 0% 100%, 9% 53%, 0% 0%);
padding: 18px 3px 18px 32px;

}

Answer 1

.arrow-div {
  height: 50px;
  width: 100px;
  padding-left: 20px;
  display: inline-block;
  position: relative;
  margin-left: 20px;
}

.arrow-div:before,
.arrow-div:after {
  content: '';
  left: -15px;
  position: absolute;
  height: 23px;
  width: 132px;
  border-left: 2px solid #0f3c80;
  border-right: 2px solid #0f3c80;
}

.arrow-div:before {
  border-top: 2px solid #0f3c80;
  transform-origin: 0% 0%;
  transform: skewX(30deg);
  top: 0;
}

.arrow-div:after {
  border-bottom: 2px solid #0f3c80;
  transform-origin: 0% 100%;
  transform: skewX(-30deg);
  bottom: 0;
}

p {
color: #0f3c80;

<div class="arrow-div">
  <p>2. Summary</p>
</div>

使用 css 设计自定义箭头

Styling a custom arrow using css

html

css

reactjs

react-router

react-hooks