0

Need help on how to put an arrow on each side of a box pointing outward.

I have the box and the basic CSS for an arrow I saw on another stack question.

Need help creating four arrows in that box

Im a java developer so this is not my cup of tea

Box: 

#myBox {
  width: 150px;
  height: 150px;
  background-color: grey;
  border: 1px solid black;
}
/*Chevron*/
.Chevron {
  position: relative;
  display: block;
  height: 50px;
  /*height should be double border*/
}
.Chevron:before,
.Chevron:after {
  position: absolute;
  display: block;
  content: "";
  border: 25px solid transparent;
  /*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/

.Chevron:before {
  top: 0;
  border-top-color: #b00;
  /*Chevron Color*/
}
.Chevron:after {
  top: -50px;
  /*adjust thickness*/
  border-top-color: #fff;
  /*Match background colour*/
}
<div id="myBox"></div>





<i class="Chevron"></i>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
Doc Holiday
  • 9,928
  • 32
  • 98
  • 151
  • 6
    Any image of how exactly the two arrows should be? Should they look like speech bubble arrows on either or side (or) should the shape with arrows look like a hexagon? – Harry Jun 11 '15 at 14:52
  • at the top-middle of the box should be an arrow pointing up....right middle should be an arrow pointing right..etc – Doc Holiday Jun 11 '15 at 14:53
  • all four side....tip of arrows should be touching its corresponding side of the box – Doc Holiday Jun 11 '15 at 14:55
  • is the box always going to be square? – jbutler483 Jun 11 '15 at 14:56
  • yes the box will be that static size square – Doc Holiday Jun 11 '15 at 14:57
  • @DocHoliday: Sorry how wide should the longer side (hypotenuse) of the triangle be? Is it same length as the sides of the square? It would still be good if you could show an image just so that nobody takes the effort to post an answer and then finds it to be wide off the mark. – Harry Jun 11 '15 at 15:01
  • @Harry If you look at the snippet of the arrow. Its the exact size I need relative to the box size. Just create four of those parallel to each other inside of the box all pointing outward to the side they are looking at – Doc Holiday Jun 11 '15 at 15:02
  • How about this? http://jsfiddle.net/v8fs0oLr/ or http://jsfiddle.net/v8fs0oLr/1/ – Stickers Jun 11 '15 at 15:42

3 Answers3

3

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>

i have used the nth-child in order to position the arrows correctly. I have also needed to used a wrapper div like in this answer as the border-hack won't work on a hit-test.

Community
  • 1
  • 1
jbutler483
  • 24,074
  • 9
  • 92
  • 145
1

Use Css triangle. Do you need something like this?

enter image description here

For each side, use the code below to make a triangle:

width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 0;
border-color: transparent #007bff transparent transparent;

Here is a working demo.

Giacomo Paita
  • 1,411
  • 2
  • 12
  • 21
1

I have managed to do this with 3 elements using CSS transforms and positioning. Is that what you were trying to achieve?

.container {
  width: 100px;
  height: 100px;
  background: grey;
  position: relative;
}

.container .triangles {
  width: 70px;
  height: 70px;
  background: yellow;
  transform: rotate(45deg);
  position: absolute;
  top: 15px;
  left: 15px;
}

.container .triangles .box {
  width: 50px; 
  height: 50px;
  background: blue;
  transform: rotate(-45deg);
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
}
<div class="container">
  <div class="triangles">
    <div class="box">
      text
    </div>
  </div>
</div>
Stewartside
  • 20,378
  • 12
  • 60
  • 81