CODEWITHSUNDEEP
htmlcssbuttonstyles
Geethu Jose
Geethu Jose

Reputation: 1993

Span element with arrow head on right

I am trying to style a span element with an arrowhead on right center. I was able to achieve a full height arrowhead on right. But I want this to be only in the right center.

This is what I am trying achieve 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>

Upvotes: 0

Views: 1537

Answers (4)

Stickers
Stickers

Reputation: 78686

You can do with SVG for caret and linear-gradient for background colors:

.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>

Upvotes: 1

Craig Menne
Craig Menne

Reputation: 75

I believe this can be done fairly easily using Clip-Path: Polygon. It would take a bit of work to refine the shape as needed. There might be an easier way to place these rather then using absolute position. This does create the desired effect though. 

.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>

Upvotes: 1

Turnip
Turnip

Reputation: 36662

With a few minor changes to your existing CSS, you could use a second psuedo element to generate the dark green square.

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>

Or alternatively, you could use gradient background...

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>

Upvotes: 2

enxaneta
enxaneta

Reputation: 33044

This is how I would do it. (No extra HTML elements)

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>

Upvotes: 1

Related Questions