CODEWITHSUNDEEP
htmlcsscss-shapes
Doc Holiday
Doc Holiday

Reputation: 10254

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

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>

Upvotes: 0

Views: 2815

Answers (3)

Stewartside
Stewartside

Reputation: 20905

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>

Upvotes: 1

jbutler483
jbutler483

Reputation: 24559

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.

Upvotes: 3

Giacomo Paita
Giacomo Paita

Reputation: 1419

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.

Upvotes: 1

Related Questions