Div with Double Arrow on Top and Bottom

Div with double arrow on top and bottom

Taken from this website here is the chevron shape you desire:

#chevron {  position: relative;  text-align: center;  padding: 12px;  margin-bottom: 6px;  height: 60px;  width: 200px;}#chevron:before {  content: '';  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 51%;  background: red;  -webkit-transform: skew(0deg, 6deg);  -moz-transform: skew(0deg, 6deg);  -ms-transform: skew(0deg, 6deg);  -o-transform: skew(0deg, 6deg);  transform: skew(0deg, 6deg);}#chevron:after {  content: '';  position: absolute;  top: 0;  right: 0;  height: 100%;  width: 50%;  background: red;  -webkit-transform: skew(0deg, -6deg);  -moz-transform: skew(0deg, -6deg);  -ms-transform: skew(0deg, -6deg);  -o-transform: skew(0deg, -6deg);  transform: skew(0deg, -6deg);}p{  position: relative;  z-index: 1;}

<div id="chevron"><p>Hello</p></div>

HTML/CSS Create Div with Arrow Bottom

Add a span with the absolute position to that div.

<div class="menuSelected"><span></span></div>

#menuSelected {
    position: relative;
    width: 250px;
    height: 35px;
    background-color: #368EC5;
}
span {
    border-top: 10px solid #368EC5;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    bottom: -10px;
    left: 20px;
}

See updated fiddle.

Double Arrow CSS

I just used :before and copied the CSS you were using on the :after, only changing the margin-top and the position.

    #basso {   text-align: center;   display: inline-block;   vertical-align: middle; }

 #bottom {   display: inline-block;   border-radius: 50%;  }
 #freccia:hover #bottom {   display: inline-block;   border-radius: 50%;   border: 0.15em solid #4183D7; }
 #freccia:hover #bottom:after {   border-top: 0.15em solid #4183D7;   border-right: 0.15em solid #4183D7; }

 #bottom  {   display: inline-block;   width: 3em;   height: 3em;   border: 0.15em solid #333;   border-radius: 50%;   margin-left: 0.75em;   transition: all 0.1s ease-out;       }
 #bottom:after  {   content: '';   display: inline-block;   margin-top: 0.6em;   width: 1.2em;   height: 1.2em;   border-top: 0.15em solid #333;   border-right: 0.15em solid #333;   -moz-transform: rotate(135deg);   -webkit-transform: rotate(135deg);   transform: rotate(135deg);   transition: all 0.1s ease-out; }  #bottom:before  {  position: absolute;   content: '';   display: inline-block;   margin-top: 0.3em;   width: 1.2em;   height: 1.2em;   border-top: 0.15em solid #333;   border-right: 0.15em solid #333;   -moz-transform: rotate(135deg);   -webkit-transform: rotate(135deg);   transform: rotate(135deg);   transition: all 0.1s ease-out; }

 #bottom:hover:after {   content: '';   display: inline-block;   margin-top: 0.9em;   width: 1.2em;   height: 1.2em;   border-top: 0.15em solid #4183D7;   border-right: 0.15em solid #4183D7;   -moz-transform: rotate(135deg);   -webkit-transform: rotate(135deg);   transform: rotate(135deg); }  #bottom:hover:before {   content: '';   display: inline-block;   margin-top: 0.6em;   width: 1.2em;   height: 1.2em;   border-top: 0.15em solid #4183D7;   border-right: 0.15em solid #4183D7;   -moz-transform: rotate(135deg);   -webkit-transform: rotate(135deg);   transform: rotate(135deg); }

    <div id="basso">        <a href="#" id="freccia">            <span id="bottom"></span>        </a>    </div>

How can I vertical align a double arrow (») which has bigger height than text beside?

Adding position:relative to the icon might help you out..

.box {  background-color: #333333;  color: #ffffff;  padding: 20px;  width: 300px;  text-align: center;  font-size: 1.5rem;  font-family: Verdana;  border-radius: 30px;}
.arrow {  position:relative;  top:5px;  font-size: 3rem;  line-height: 0;}

<div class="box">My Text <span class="arrow">»</span></div>

Css double arrow

You may consider pseudo element and rotation like this :

.arrow1 {  height: 120px;  width: 100px;  overflow: hidden;  position: relative;}
.arrow1:before,.arrow1:after {  content: " ";  position: absolute;  width: 60px;  height: 60px;  background: rgba(0, 128, 0, 0.6);  transform: rotate(45deg);  left: -30px;  top: 40px;}
.arrow1:after {  top: 20px;}

<div class="arrow1"></div>

CSS Put arrows on each side of a Box(div)

Since you are looking to interact with these shapes, you'd be better to go with a different approach to making your triangles, rather than a border hack.

.box {  height: 150px;  width: 150px;  background: lightgray;  position: relative;}.wrap {  position: absolute;  top: 0;  left: 25%;  height: 25%;  width: 50%;  overflow: hidden;}.touch {  position: absolute;  top: 0;  left: 50%;  height: 200%;  width: 200%;  transform: rotate(45deg);  transform-origin: top left;  background: gray;  cursor: pointer;}.wrap:nth-child(2) {  transform: rotate(90deg);  transform-origin: top left;  top: 25%;  left: 100%;}.wrap:nth-child(3) {  transform: rotate(180deg);  transform-origin: top left;  top: 100%;  left: 75%;}.wrap:nth-child(4) {  transform: rotate(-90deg);  transform-origin: top left;  top: 75%;  left: 0;}.touch:hover {  background: tomato;}

<div class="box">  <span class="wrap"><span class="touch"></span></span>  <span class="wrap"><span class="touch"></span></span>  <span class="wrap"><span class="touch"></span></span>  <span class="wrap"><span class="touch"></span></span>
</div>

Hover effect on a different element

You can use general sibling selector to select .bottom-box first:

.bottom-box-text {    display: none;}
.double-arrow:hover ~ .bottom-box .bottom-box-text {    display: inline;}

<div class="bottom-container">  <div class="double-arrow">Arrow</div>  <div class="bottom-box green margin-top">    <h1 class="bottom-box-h1">Box title 1</h1>    <p class="bottom-box-text">It is a long established fact that a reader will be distracted by the readable content</p>  </div></div>

Using double arrows in a collapse menu

change your css to next

#accordion .panel-heading { 
    padding: 0;
    position: relative;
}
#accordion .panel-title > a {
    display: block;
    padding: 0.4em 2em;
    outline: none;
    font-weight:bold;
    text-decoration: none;
}

#accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before,
#accordion .panel-title > a.accordion-toggle::after, #accordion a[data-toggle="collapse"]::after{
    content:"\e113";
    position: absolute;
    font-family: 'Glyphicons Halflings';
    top: 0.5em;

}
#accordion .panel-title > a.accordion-toggle.collapsed::before, #accordion a.collapsed[data-toggle="collapse"]::before,
#accordion .panel-title > a.accordion-toggle.collapsed::after, #accordion a.collapsed[data-toggle="collapse"]::after{
    content:"\e114";
}
#accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before,
#accordion .panel-title > a.accordion-toggle.collapsed::before, #accordion a.collapsed[data-toggle="collapse"]::before {
    left: 0.5em;
}
#accordion .panel-title > a.accordion-toggle.collapsed::after, #accordion a.collapsed[data-toggle="collapse"]::after,
#accordion .panel-title > a.accordion-toggle::after, #accordion a[data-toggle="collapse"]::after{
    right: 0.5em;
}

Div with Double Arrow on Top and Bottom