html - 设计中的 CSS 和 HTML

Question

我想知道是否有人遇到过如何在 CSS 中创建箭头（是的，我想在 CSS 中知道） - 任何 CSS 设计中的网站/教程都将不胜感激。

像这样的东西：

任何人都可以建议我如何做到这一点？

编辑：对不起，我的意思是雪佛龙！

Answer 1

编辑：

哈，你要的是箭，但实际上要的是雪佛龙！

对于你想要的形状，为什么不直接使用一个巨大的<？

如果不行，就叠加两个三角形，一个红色，一个白色……</p>

http://cdpn.io/LykHa

.chevron {
  position:relative;
}
.chevron::before {
  position:absolute;
  left:10px;
  top:0;
  content:'';
  display:block;
  border-color:transparent transparent transparent red;
  border-width:20px;
  border-style:solid;
}
.chevron::after {
  position:absolute;
  left:0px;
  top:0;
  content:'';
  display:block;
  border-color:transparent transparent transparent white;
  border-width:20px;
  border-style:solid;
}

---

为了好玩——http: //cdpn.io/yaqGs

不过，我不会真的这样做——我可能会使用 PNG 或 SVG。看起来我的矩形超出了一个像素，所以这个数字可能需要稍微调整一下。

好像：

HTML：

<div class='arrow'></div>

CSS：

后面是三角形，前面是矩形。

.arrow {
  position:relative;
}
.arrow::after {
  position:absolute;
  left:40px;
  top:0;
  content:'';
  display:block;
  border-color:transparent transparent transparent red;
  border-width:20px;
  border-style:solid;
}

.arrow::before {
  position:absolute;
  top:14px;
  content:'';
  display:block;
  height:10px;
  width:40px;
  background-color:red;
}

Answer 2

要么使用

.foo:before { content: "‹"; }

或者像这里描述的那样做一个三角形。

顺便说一句：对您的回答投反对票是合理的。为它感到难过。