尝试使用箭头创建按钮

Question

我正在尝试创建一个带有与下图相同的箭头的按钮：

但是当我使用下面的代码执行此操作时，它看起来像这样：

我的代码：

.ms-btn,
.ms-btn:hover {
  border: 2px solid #3E5B73;
  color: #3E5B73;
  font-size: 12px;
  font-family: 'Ubuntu';
  border-radius: 40px;
  padding: 16px 28px;
  position: relative;
  background: transparent;
  transition: 0.3s all linear;
}

.ms-btn:before {
  content: url(../img/image-left.svg);
  position: absolute;
  left: -15px;
  top: 23%;
  /*background: #fff;*/
  padding: 5px;
  height: 24px;
  display: flex;
  transform: translateX(0px);
  transition: 0.3s all linear;
}

<a class="ms-btn" href="">LEARN MORE</a>

希望看到使用 css 的任何解决方案。所以按钮边框可以剪掉什么的..

Answer 1

为'svg'添加背景颜色代码并调整位置顶部。就是这样。

div {
  padding: 20px;
}
.ms-btn,
.ms-btn:hover {
  border: 2px solid #3E5B73;
  color: #3E5B73;
  font-size: 12px;
  font-family: 'Ubuntu';
  border-radius: 40px;
  padding: 16px 28px;
  position: relative;
  background: transparent;
  transition: 0.3s all linear;
}

.ms-btn:before {
  content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
  position: absolute;
  left: -15px;
  top: 15%;
  background: #fff;
  padding: 5px;
  height: 24px;
  display: flex;
  transform: translateX(0px);
  transition: 0.3s all linear;
}

<div>
  <a class="ms-btn" href="">LEARN MORE</a>
</div>

Answer 2

最接近您想要的样式是我在下面标注的样式。我删除了左边框并减小了左上边框和左下边框的半径。您可以根据需要增加或减少它们。这个箭头没有也不需要背景颜色，我想它会解决你的问题，满足你的需要。

div {
  padding: 20px;
}
.ms-btn,
.ms-btn:hover {
  border-width: 2px 2px 2px 0px;
  border-color: #3E5B73;
  border-style: solid;
  color: #3E5B73;
  font-size: 12px;
  font-family: 'Ubuntu';
  border-radius: 20px 40px 40px 20px;
  padding: 16px 28px;
  position: relative;
  background: transparent;
  transition: 0.3s all linear;
}

.ms-btn:before {
  content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
  position: absolute;
  left: -25px;
  top: 15%;
  padding: 5px;
  height: 24px;
  display: flex;
  transform: translateX(0px);
  transition: 0.3s all linear;
}

<div>
  <a class="ms-btn" href="">LEARN MORE</a>
</div>

Answer 3

使用clip-path切边框。我添加了 2 CSS 个变量来控制切割区域：

.ms-btn {
  --s: 15px;
  --b: 10px;
  
  display: inline-block;
  margin: 50px;
  color: #3E5B73;
  font-size: 12px;
  padding: 16px 28px;
  position: relative;
  transition: 0.3s all linear;
}

/* the border */
.ms-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #3E5B73;
  border-radius: 40px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 calc(50% + var(--s)),var(--b) calc(50% + var(--s)),var(--b) calc(50% - var(--s)),0 calc(50% - var(--s)));
}

/* the arrow */
.ms-btn:after {
  content: "";
  position: absolute;
  left: -10px;
  top: calc(50% - 10px);
  background: red;
  height: 20px;
  width: 20px;
}

<a class="ms-btn" href="">LEARN MORE</a>

尝试使用箭头创建按钮

Trying to create button using arrow

html

css

bootstrap-4