How to Make a "Double Arrow" with CSS3 Content Technique

body {  background: gray;}a {  display: block;  background: rgb(255,126,0);  color: white;  width: 300px;  min-height: 35px;  padding: 4px 5% 4px 4px;  margin-bottom: 10px;  text-decoration: none;  text-transform: uppercase;  font-size: 24px;  -webkit-clip-path: url(#clipper);  clip-path: url(#clipper);}

<svg width="0" height="0">  <defs>    <clipPath id="clipper" clipPathUnits="objectBoundingBox">      <path d="M0,0 0.79,0 0.83,0.5 0.79,1 0.81,1 0.85,0.5 0.81,0 0.86,0 0.9,0.5 0.86,1 0.88,1 0.92,0.5 0.88,0 0.93,0 0.97,0.5 0.93,1 0,1z" />    </clipPath>  </defs></svg><a href="#" class="btn-wrap">  <span class="btn btn-primary">See the proof</span></a>
<a href="#" class="btn-wrap">  <span class="btn btn-primary">See the proof when there is large text</span></a>

How to show an arrow down symbol with CSS

You may use other unicode or use borders :
DEMO

.select:before{
    content: "\25be  or  \25bc  ?  ";
    float:right;
    color:gray;
}
.select:after{
    content: "";
    margin:0 0.5em;
    display:inline-block;
    border: 7px solid transparent;
    border-top:8px solid gray;
    border-bottom:0 none;
}

How can I do thing like arrow in design of div?

Creating a triangle as a pseudoelement using borders is one way to do it, but your mockup includes a box-shadow. If you don't want to sacrifice the box-shadow (because using the border technique, it will create a square shadow and look quite bad), there is a way.

Create two pseudoelements styled as absolutely positioned squares, and rotate them 45 degrees. Set just one of them to a lower stacking order than the default (z-index: -1) and apply the box shadow to that element.

Check out the jsFiddle

HTML:

<div class="container"></div>

CSS:

.container:before,
.container:after {
    content: '';
    width: 2em; height: 2em;
    position: absolute; top: -1em; left: 50%;
    margin-left: -.5em;
    background: green;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.container:before {
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
    box-shadow: 0 0 5px black;
    z-index: -1;
}

Right banner arrows purely in CSS

So the trick, here, is being able to control the height correctly. Here, I've got the text in a span with a line-height : 0, and padding:15px. Now, we have precisely 30px of height, and can use an ::after pseudo element to fabricate the arrow. The width will be set by the text content, but can be defined with an explicit width rule, as well.

<div class="arrow"><span>text</span></div>

.arrow{
  display:inline-block;
  height:auto;
  background-color:orange;
}

.arrow span{
  display:inline-block;
  line-height:0;
  padding:15px;
  color:white;
}

.arrow::after{
    width: 0;
    height: 0;
    position: absolute;
    right:0
    top: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid orange;
    content: "";
}

Add whatever colors / hover states you require. You can see some basic rules in the working fiddle.

Fiddle

Related Topics