使用CSS的箭头

Question

我想用css创建一个像我所附的箭头.

我发现了以下文章,但我无法删除只有一个尖端的文章.

/* General Button Style */

.button {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  min-width: 200px;
  height: 80px;
  margin: 40px auto;
  color: #fd0;
  text-align: center;
  text-decoration: none;
  line-height: 80px;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 100%;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
}

.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}


/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #fd0;
}

.button.border:before {
  border-bottom: none;
  /* to prevent the border-line showing up in the middle of the shape */
}

.button.border:after {
  border-top: none;
  /* to prevent the border-line showing up in the middle of the shape */
}


/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #fd0;
}

.button.border:hover {
  color: #fff;
}


/* Just for demo */

body {
  background: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  text-align: center;
}

<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a href="#" class="button ribbon-outset border">Click me!</a>

<br/>

Answer 1

使用transform-origin: left;它只在一侧:before和:after

/* General Button Style */

.button {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  min-width: 200px;
  height: 80px;
  margin: 40px auto;
  color: #fd0;
  text-align: center;
  text-decoration: none;
  line-height: 80px;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 100%;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
   transform-origin: left;
}

.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
   transform-origin: left;
}


/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #fd0;
}

.button.border:before {
  border-bottom: none;
  /* to prevent the border-line showing up in the middle of the shape */
}

.button.border:after {
  border-top: none;
  /* to prevent the border-line showing up in the middle of the shape */
}


/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #fd0;
}

.button.border:hover {
  color: #fff;
}


/* Just for demo */

body {
  background: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  text-align: center;
}

<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<a href="#" class="button ribbon-outset border">Click me!</a>

<br/>