右侧带有箭头的跨度元素答案

【问题标题】：Span element with arrow head on right右侧带有箭头的跨度元素
【发布时间】：2019-02-24 20:56:11
【问题描述】：

我正在尝试使用右中心的箭头设置 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;
}

&lt;span class="btn"&gt;Some text&lt;/span&gt;

【问题讨论】：

你想要this吗？

标签： html css button styles

【解决方案1】：

通过对现有 CSS 进行一些小改动，您可以使用第二个伪元素来生成深绿色方块。

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

&lt;span class="btn"&gt;Some text&lt;/span&gt;

【讨论】：

【解决方案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);
}

&lt;span class="btn"&gt;Some text&lt;/span&gt;

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
}

&lt;span class="btn"&gt;Some text&lt;/span&gt;

【讨论】：