Question

我有一些css是一个更大的项目的一部分，并且我希望箭头是一条直线。

这是CSS。

/** panel arrows **/
.timeline li .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #FF0000;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline li .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #FF0000;
  border-right: 0 solid #FF0000;
  border-bottom: 14px solid transparent;
  content: " ";
}

我也做了http://jsfiddle.net/y4g27b6s/

Answer 1

这是你的意思，因为你的问题非常不明确吗？

.timeline li .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 1px solid #FF0000;
  border-left: 10px solid #FF0000;
  border-right: 10px solid #FF0000;
  border-bottom: 1px solid #FF0000;
  content: " ";
}

.timeline li .timeline-panel:after {
 position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 1px solid #FF0000;
  border-left: 10px solid #FF0000;
  border-right: 10px solid #FF0000;
  border-bottom: 1px solid #FF0000;
  content: " ";
}

http://jsfiddle.net/y4g27b6s/1/

如何使箭头成直线？

1 个答案: