跨度元素，右侧带箭头

Question

我正在尝试在中心居中的箭头样式化span元素。 我能够实现右侧的全高箭头。但是我希望这只在正确的中心。

这是我正在尝试实现的

body{
    margin:100px;
}
span.btn{
    height:50px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
    padding:0 10px;
    color:#ffffff;
    background-color:#6AA84F;
    position:relative;
    display:inline-block;
}
span.btn:after{
    position:absolute;
    right:-20px;
    content:" ";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 25px 0 25px 20px;
    border-color: transparent transparent transparent #6AA84F;
}

<span class="btn">Some text</span>

Answer 1

对现有CSS进行一些细微更改后，您可以使用第二个psuedo元素来生成深绿色方块。

Subject: Cron <martinbouhier@ops-mac> python /Users/martinbouhier/Desktop/Github/klipfolio/Scripts/clientes_ar.py
X-Cron-Env: <SHELL=/bin/sh>
X-Cron-Env: <PATH=/usr/bin:/bin>
X-Cron-Env: <LOGNAME=martinbouhier>
X-Cron-Env: <USER=martinbouhier>
X-Cron-Env: <HOME=/Users/martinbouhier>
Date: Thu, 20 Sep 2018 11:12:01 -0300 (-03)

Traceback (most recent call last):
  File "/Users/martinbouhier/Desktop/Github/klipfolio/Scripts/clientes_ar.py", line 10, in <module>
    from Modulos_epl.logins_us_ar import (
  File "/Users/martinbouhier/Desktop/Github/klipfolio/Scripts/Modulos_epl/logins_us_ar.py", line 2, in <module>
    import requests
ImportError: No module named requests

body{
    margin:100px;
}
span.btn{
    height:50px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
    padding:0 10px 0 0;
    color:#ffffff;
    background-color:#6AA84F;
    position:relative;
    display:inline-flex;
}

span.btn:after{
    position:absolute;
    left:50px;
    top: 50%;
    margin-top: -10px;
    content:" ";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent darkgreen;
}

span.btn:before {
  content: "";
  display: inline-block;
  height: 50px;
  width: 50px;
  margin-right: 15px;
  background: darkgreen;
}

或者，您也可以使用渐变背景...

<span class="btn">Some text</span>
<span class="btn">Some longer text</span>

body{
    margin:100px;
}
span.btn{
    height:50px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
    padding:0 10px 0 65px;
    color:#ffffff;
    background-color:#6AA84F;
    position:relative;
    display:inline-flex;
    background: linear-gradient(to right, #006400 0%,#006400 50px,#6AA84F 50px,#6AA84F 100%)
}

span.btn:after{
    position:absolute;
    left:50px;
    top: 50%;
    margin-top: -10px;
    content:" ";
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent darkgreen;
}

Answer 2

这就是我要做的。 （没有多余的HTML元素）

body{
    margin:100px;
}
span.btn{
    height:50px;
    line-height:50px;
    text-align:center;
    padding:0 30px 0 80px;
    color:#ffffff;
    background-color:#6AA84F;
    position:relative;
    display:inline-block;
}

span.btn::before{
  content:"";
  background-color:#48862d;
  width:50px;height:50px;
  display:block;
  position:absolute;
  top:0; left:0;
}

span.btn::after{
  content:"";
  width:16px;height:16px;
  background-color:#48862d;
  display:block;
  position:absolute;
  left:42px;
  top:17px;
  transform: rotate(45deg);
}

<span class="btn">Some text</span>

Answer 3

我相信使用Clip-Path：Polygon可以很容易地做到这一点。根据需要改进形状需要一些工作。可能有一种更简单的方法放置它们，而不是使用绝对位置。但这确实会产生所需的效果。

.left-color {
  background-color: red;
  height: 200px;
  width: 800px;
  position: absolute;
  top: 0;
  left: 0;
  
  clip-path: polygon(0 0, 200px 0, 200px 80px, 240px 100px, 200px 120px, 200px 200px, 0 200px);
}

.right-color {
  background-color: blue;
  height: 200px;
  width: 800px;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="right-color">Right Color</div>
<div class="left-color">Left color</div>

Answer 4

您可以将SVG用于脱字号，将线性渐变用于背景色：

.btn {
  display: inline-block;
  padding: 10px 20px 10px 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath d='M0 10l5-5-5-5z' fill='%23006400'/%3E%3C/svg%3E") 30px center / auto 10px no-repeat, linear-gradient(to right, #006400 30px, #008000 30px);
  color: #fff;
}

<span class="btn">Some text</span>