Applying a dummy bottom to a rotated div

Question

I am currently using the CSS3 value rotateto represent the look of the arrow for modal boxes. I am now in a situation where I need to create a full arrow with a lower border. Since this is just a div that rotates at an angle of 45 °, applying the other borderto either of the two sides will not solve the problem.

My first thought was to apply some pseudo-selector style div :afterand vertically center it. For some reason, it inherits the value of rotate. I tried to set the value noneand tried to manually adjust the angle of rotation, but to no avail. Any idea on how to get this border to reset horizontally?

Through Harry, I set the selector angle :afterto -45degand topequal 50%. The only problem now is that it does not expand completely to the left and right of the div. Any ideas?

.arrow {
  background-color: transparent;
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  position: relative;
  height: 18px;
  width: 18px;

  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow:after {
  content: "";
  background: #c7c7c7;
  display: inline-block;
  position: absolute;
  top: 50%;
  height: 2px;
  width: 100%;
  
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

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

Run code

Answer 1

Using CSS Transforms:

You can create a full arrow with a lower border using the approach adopted in the snippet below. Here the arrow is created by the element :after, and the line below is created using the parent container. The axis of rotation is fixed using the same transform-originfor the parent and child.

, , - ( , ).

.arrow {
  position: relative;
  height: 25px;
  width: 25px;
  border-bottom: 2px solid #c7c7c7;
}
.arrow:after {
  position: absolute;
  content: "";
  bottom: -1px;  /* half of border top */
  left: -2px;  /* equal to border left */
  height: calc(100% / 1.414); /* division by 1.414 because parent has to be larger */
  width: calc(100% / 1.414);
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  transform-origin: left bottom;
  transform: rotate(45deg);
}

/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }

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

---

SVG:

SVG , , . path, , , d. M , L , .

svg {
  width: 25px;
  height: 18px;
}
path {
  stroke: #c7c7c7;
  stroke-width: 2;
  fill: transparent;
}

/* Just for demo */
svg{ transition: all 1s; }
svg:hover{ width: 50px; height: 36px; }

<svg viewBox='0 0 50 50' preserveAspectRatio='none'>
  <path id='arrowhead' d='M0,48 L25,2 50,48z' vector-effect='non-scaling-stroke'/>
</svg>

---

:

linear-gradient, , . , ( ).

.arrow {
  position: relative;
  height: 18px;
  width: 18px;
  border-top: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  background: linear-gradient(to left top, transparent 50%, #c7c7c7 50%, #c7c7c7 60%, transparent 60%);
  transform: rotate(45deg);
}

/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }

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