How to Make a Div with Arrowlike Side Without CSS Border Tricks

How to make a div with arrowlike side without css border tricks?

Svg are great for creating shapes in html

Used a polygon element for the shape.

Text element for the link description.

A element for creating a link.

#arrow-menu a polygon {  fill: #888;  stroke: #222;}#arrow-menu a:hover polygon {  stroke: #222;  fill: black;}#arrow-menu a:hover text {  fill: cornflowerblue;}#arrow-menu a {  font-size: 5px;}

<svg id="arrow-menu" viewBox="-1 -1 112 22" xmlns:xlink="http://www.w3.org/1999/xlink">  <a xlink:href="#">    <polygon points="0,0 20,0 25,10 20,20 0,20 0,0"></polygon>    <text x="1.5" y="11.5">Menu link</text>  </a>  <a xlink:href="#">    <polygon transform="translate(22)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>  </a>  <a xlink:href="#">    <polygon transform="translate(44)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>  </a>  <a xlink:href="#">    <polygon transform="translate(66)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>  </a></svg>

Border around arrows

you may use gradients and background size to draw parts of arrow and bits of border:

body {  margin: 20px;  font-family: Helvetica;  background: #d4f2ff;}
#crumbs {  text-align: center; }
#crumbs ul {  list-style: none;  display: inline-table;  min-width:960px}
#crumbs ul li {  float:left;;}
#crumbs ul li a {  float: left;  height: 50px;  background: linear-gradient(to right, transparent 1.2em, #3498db 1.2em);  /* leave some blank bg to draw arrow */  text-align: center;  padding: 30px 40px 0 80px;  position: relative;  margin: 0 10px 0 0;  border-top: 2px solid orange;  border-bottom: 2px solid orange;  font-size: 20px;  text-decoration: none;  color: #fff;}
li+li {  position: relative;  margin-left: 7px;}
li+li a:before {  content: '';  position: absolute;  width: 3em;  top: 0px;  bottom: 0px;  left: calc(-1em - 5px);  background: linear-gradient(60deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.35em)top no-repeat, linear-gradient(120deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.35em)bottom left no-repeat;  /* 2  gradients drawing end of arrow , borders and begining of next arrow */  background-size: 100% 50%}li  a {/* smoothen a bit corners */  border-radius:3px;}#crumbs ul li:first-child a {  border-top-left-radius: 10px;  border-bottom-left-radius: 10px;  border-left: 2px solid orange;  background: #3498db;/* draww full bg there is no arrows before that one */}
#crumbs ul li:last-child a {  padding-right: 80px;  border-top-right-radius: 10px;  border-bottom-right-radius: 10px;  border-right: 2px solid orange;}
/* next is updates of gradients colors and bg for hover state */#crumbs ul li:hover a:before { background: linear-gradient(60deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #fa5ba5  2.35em)top no-repeat, linear-gradient(120deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #fa5ba5 2.35em)bottom left no-repeat;  background-size: 100% 50%}
#crumbs ul li:hover +li a:before { background: linear-gradient(60deg, #fa5ba5 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #3498db  2.35em)top no-repeat, linear-gradient(120deg, #fa5ba5 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #3498db 2.35em)bottom left no-repeat;  background-size: 100% 50%}
#crumbs ul li:hover a {  background: linear-gradient(to right, transparent 1.2em, #fa5ba5 1.2em);}
#crumbs ul li:first-child:hover a {  background: #fa5ba5;}

<div id="crumbs"> <ul>  <li><a href="#1">One</a></li>  <li><a href="#2">Two</a></li>  <li><a href="#3">Three</a></li>  <li><a href="#4">Four</a></li>  <li><a href="#5">Five</a></li> </ul>  </div>

Creating an arrow for a div in css

you may try using a rotated square with :before (or :after) element like this :

.imageDiv {  margin-top: 70px;  background: #fff;  display: block;  width: 555px;  height: 455px;  padding: 10px;  border-radius: 2px 2px 2px 2px;  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.bottomDiv {  position: relative;  bottom: 460px;  left: 404px;  width: 295px;  height: 295px;  background: black;}.imageDiv.bottomDiv:before {    content: " ";    position: absolute;    background: #000;    width: 30px;    height: 30px;    top: 25px;    left: -15px;    transform: rotate(45deg);}

<div class="row">  <div class="col-md-10">    <div class="imageDiv"></div>    <div class="imageDiv bottomDiv"></div>  </div></div>

How to Make A Chevron Arrow Using CSS?

You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.

Scroll down for a different solution that uses an actual element instead of the pseuso elements

In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.

ul {    list-style: none;}
ul.big {    list-style: none;    font-size: 300%}
li::before {    position: relative;    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/    content: "";    display: inline-block;    /* By using an em scale, the arrows will size with the font */    width: 0.4em;    height: 0.4em;    border-right: 0.2em solid black;    border-top: 0.2em solid black;    transform: rotate(45deg);    margin-right: 0.5em;}
/* Change color */li:hover {  color: red; /* For the text */}li:hover::before {  border-color: red; /* For the arrow (which is a border) */}

<ul>    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>
<ul class="big">    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>

How to create responsive triangle as right border?

You cannot use the border triangle method to create the triangles here because the height of your element is dynamic. Instead you could use any of the following alternatives:

Inline SVG + Clip Path: ^Recommended

You can make use of inline SVG and clip-path to produce the bar with a triangle effect. The clip-path is applied only while hovering on the a tag and so the normal state remains unaffected. The browser support for this is much better than the CSS equivalent.

ul {  width: 120px;}li {  list-style-type: none;}a {  position: relative;  display: block;  padding: 10px;  color: #00f;  text-decoration: none;}a:hover {  -webkit-clip-path: url(#clip-shape);  -moz-clip-path: url(#clip-shape);  clip-path: url(#clip-shape);  background: crimson;}

<svg width="0" height="0">  <defs>    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">      <polygon points="0,0 0.8,0 1,0.5 0.8,1 0,1" />    </clipPath>  </defs></svg>
<ul>  <li><a href="#">Lorem ipsum</a>  </li>  <li><a href="#">Lorem ipsum</a>  </li>  <li><a href="#">Lorem ipsum dolor sit amet</a>  </li></ul>

CSS: Any way to create top to bottom arrow?

It's possible using "a single div" by taking advantage of the :before and :after selector.

.arrow {  margin: 50px;  width: 500px;  height: 40px;}.arrow:before {  content: '';  position: relative;  left: 0;  top: 0;  display: inline-block;  width: calc(50% - 2px);  height: 100%;  border: 1px solid red;  border-right-width: 0;  transform: skewY(10deg);}.arrow:after {  content: '';  right: 0;  top: 0;  position: relative;  display: inline-block;  width: calc(50% - 2px);  height: 100%;  border: 1px solid red;  border-left-width: 0;  transform: skewY(-10deg);}

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

---

Related Topics