div上的双面箭头

Question

我想在div上生成一个双面箭头.我能够在'之后'产生,但之前没有工作.我该怎么做？

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>

在JSFiddle上查看

Answer 1

你:before和两者都有相同的规则:after.只是轻轻地调整它,你就是金色的.

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>