设计中的 CSS 和 HTML [关闭]答案

【问题标题】：CSS & HTML in Design [closed]设计中的 CSS 和 HTML [关闭]
【发布时间】：2013-05-15 11:24:36
【问题描述】：

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

类似这样的：

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

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

【问题讨论】：

是的，他们有。不客气。
我不会打扰。使用 PNG 或 SVG。如果你真的想，可以同时使用 CSS 三角形和矩形，但也没有任何理由。
apps.eky.hk/css-triangle-generator/…
@marcelo2605 感谢您的链接，但这与我想要的不完全相同，但虽然谢谢。 Rich Bradshaw，我知道这可能很麻烦，但我想知道。
我已经回答了@benito

标签： html css

【解决方案1】：

编辑：

哈，你想要一个箭头，但实际上想要一个 V 形！

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

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

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;
}

【讨论】：

是的，非常感谢，我只能看到灰色线与红色重叠。不过谢谢你的建议。

【解决方案2】：

任意使用

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

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

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

【讨论】：