how to make up arrow using css only?

Question

I am new to css can you guys please help me out for making custom up arrow: Below is my html div with only one div I want to make arrow using before and after css properties:

    <div class="triangle-with-shadow"></div>

Possible duplicate of [How do CSS triangles work?](http://stackoverflow.com/questions/7073484/how-do-css-triangles-work) — Jon Adams, Mar 14 '17 at 14:26

score 1 · Accepted Answer · answered Mar 14 '17 at 14:24

we have tried with below CSS code:

.triangle-with-shadow {
  width: 100px;
  height: 100px;
  position: relative;
  z-index: 5;
}
.triangle-with-shadow:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background: white;
  border: 1px solid;
  transform: rotate(45deg);
  top: 75px;
  left: 25px;
  border-width: 1px 0 0 1px;
}
.triangle-with-shadow:before {
    width: 100px;
    background: white;
    height: 100px;
    position: absolute;
    content: "";
    top: 100px;
    border: 1px solid;
}

how to make up arrow using css only?

1 Answers1