CODEWITHSUNDEEP
csspseudo-element
user1050619
user1050619

Reputation: 20856

Double sided arrow on a div

Im looking to generate a double sided arrow on a div. I was able to generate on the 'after' but before is not working. How can I do it?

div {
  width: 5px;
  height: 220px;
  background-color: red;
  /* Rotate div */
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Chrome, Safari, Opera */
  transform: rotate(30deg);
  transform-origin: bottom left;
  position: relative;
}
div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  transform: translate(-40%, -50%);
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent red transparent;
}
div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  transform: translate(-40%, -50%);
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent red transparent;
}
<div></div>

View on JSFiddle

Upvotes: 0

Views: 1875

Answers (2)

Sri Kanth
Sri Kanth

Reputation: 151

Hi have update your fiddle:

https://jsfiddle.net/p6tryx79/1/

div {
  width: 5px;
  height: 120px;
  background-color: red;
  /* Rotate div */
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Chrome, Safari, Opera */
  transform: rotate(30deg);
  transform-origin: bottom left;
  position: relative;
  margin-left:30px;
}
div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  transform: translate(-40%, -50%);
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent red transparent;
}
div:before {
  content: '';
    position: absolute;
    bottom: -6px;
    left: -4px;
    border-style: solid;
    transform: rotate(60deg);
    border-width: 0 10px 20px 10px;
    border-color: transparent transparent red transparent;
}

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78540

You have the same rule for both :before and :after. Just adjust it sligtly and you're golden.

div {
  width: 5px;
  height: 220px;
  background-color: red;
  /* Rotate div */
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Chrome, Safari, Opera */
  transform: rotate(30deg);
  transform-origin: bottom left;
  position: relative;
}

div:before,
div:after {
  content: '';
  position: absolute;
  left: 0;
  border-style: solid;
  border-color: red transparent;
}
div:after {
  top: 0;
  transform: translate(-40%, -50%);
  border-width: 0 10px 20px 10px;
}
div:before {
  bottom: 0;
  transform: translate(-40%, 50%);
  border-width: 20px 10px 0 10px;
}
<div></div>

Upvotes: 6

Related Questions