Элемент Span со стрелкой справа - PullRequest
Новая
       8

Элемент Span со стрелкой справа

0 голосов
/ 20 сентября 2018

Я пытаюсь оформить элемент span с помощью стрелки в правом центре.Я смог достичь полной высоты стрелки справа.Но я хочу, чтобы это было только в правильном центре.

Это то, что я пытаюсь достичь enter image description here

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>

Ответы [ 4 ]

0 голосов
/ 20 сентября 2018

Вы можете сделать с 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>
0 голосов
/ 20 сентября 2018

Вот как бы я это сделал.(Без дополнительных элементов 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>
0 голосов
/ 20 сентября 2018

Я считаю, что это можно сделать довольно легко, используя 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>
0 голосов
/ 20 сентября 2018

С небольшими изменениями в существующем CSS вы можете использовать второй элемент psuedo для генерации темно-зеленого квадрата. 

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;
}
<span class="btn">Some text</span>
...