使用css创建自定义箭头形状[重复]答案

【问题标题】：Use css to create a custom arrow shape [duplicate]使用css创建自定义箭头形状[重复]
【发布时间】：2015-02-16 15:59:33
【问题描述】：

我有一个覆盖图像滑块的 css 箭头框，但我需要使尾部缩进和透明，以便在其后面看到图像。需要白色部分是透明的。请参阅下面的附件图片和我的 css。谢谢

#flag { 
width: 400px; height: 80px; background: #231f20; position: relative;
}

#flag:before { 
content: ""; 
position: absolute; 
top: 0; 

width: 0; 
height: 0; 
border-top: 40px solid transparent; 

border-bottom: 40px solid transparent; 

border-left: 35px solid white;

}

#flag:after { 
content: ""; 
position: absolute; 
left: 400px; 
bottom: 0; 
width: 0; 
height: 0; 
border-top: 40px solid transparent;

border-bottom: 40px solid transparent;

border-left: 45px solid #231f20;

}

【问题讨论】：

您是否尝试将border-left: 35px solid white; 更改为solid transparent？你能发一个小提琴吗？
您也可以使用 SVG 遮罩：codepen.io/yoksel/full/fsdbu

标签： html css shape css-shapes

【解决方案1】：

这很简单。您只需要将::before伪元素的上下边框颜色设置为背景色，并将左边框颜色改为透明即可。

然后您可以使用边距/偏移量来正确定位伪元素。

body { background-color: gold; }

#flag { 
  width: 400px; height: 80px; background: #231f20; position: relative;
  margin-left: 35px;
  color: white;
  line-height: 80px;
  text-align: center;
}

#flag:before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: -35px;
  width: 0; 
  height: 0; 
  border-top: 40px solid #231f20; 
  border-bottom: 40px solid #231f20; 
  border-left: 35px solid transparent;

}

#flag:after { 
  content: ""; 
  position: absolute; 
  left: 400px; 
  bottom: 0; 
  width: 0; 
  height: 0; 
  border-top: 40px solid transparent;

  border-bottom: 40px solid transparent;

  border-left: 45px solid #231f20;
}

&lt;div id="flag"&gt;This is it!&lt;/div&gt;

【讨论】：

【解决方案2】：

最简单的解决方案是svg。

html, body {
  background: url(http://lorempixel.com/400/200/sports/) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
svg {
  position: relative;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

<svg width="225" height="50">
  <path d="M0,0 L200,0 L225,25 L200,50 L0,50 L25,25z" fill="black" />
</svg>

您可以轻松创建复杂的箭头形状。

html, body {
  background: teal;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<svg width="200" height="100" viewBox="-5 -5 210 110">
  <path d="M0,0 L155,40 L145,0 L200,50 L145,100 L155,60 L0,100 Q100,50 0,0z" stroke-linejoin="round" stroke="#222222" stroke-width="5" fill="#333333" />
</svg>

通过添加一些二次贝塞尔曲线使其更加复杂。

html,
body {
  background: teal;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  margin: 0;
}
svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<svg width="200" height="100" viewBox="-5 -5 205 107">
  <path d="M0,0 L155,40 L145,0 L200,50 L145,100 L155,60 L0,100 Q45,87.5 10,75 Q55,65 20,50 Q55,37 10,25 Q45,12.5 0,0z" stroke-linejoin="round" stroke="#222222" stroke-width="5" fill="#333333" />
</svg>

【讨论】：

简单一来就兼容性
@RokoC.Buljan - 仅不支持 IE8 - caniuse.com/#search=svg
好吧，但 IE8 仍然拥有巨大的市场份额 ~16%... 以及大量未更新的移动和桌面浏览器。 +1 推动网络向前发展的任何方式。
我会说这是一个很好的解决方案。 IE8 用户无法看到 SVG 形状，但如果理解 渐进式增强 的概念，这将不是问题。
@Terry 同意，但 AA 没有备用用例

【解决方案3】：

使用:before 的边框来绘制箭头的主要矩形部分，而不是#flag 上的background。因此将#flag:before 上的border-top 和border-bottom 设置为#231f20。这样，您只需将#flag:before 上的border-left 设置为transparent。

这是一个带有不同颜色的修改版本，以帮助可视化哪些边框正在绘制此解决方案中的哪个部分。 http://jsfiddle.net/fuvwsn55/

【讨论】：

【解决方案4】：

demo

#flag:before,
#flag:after{ 
  content: ""; 
  position: absolute; 
  border: 40px solid #231f20;
}
#flag:before { 
  left: -35px;
  border-left: 35px solid transparent;
}
#flag:after {
  right:-80px;
  border: 40px solid transparent;
  border-left: 40px solid #231f20;
}

【讨论】：

【解决方案5】：

如果你可以将你的标志分成两个 div（绝对不是在所有情况下都实用），你可以获得一个平滑渲染的箭头（注意，这也会扭曲你的 div 的内容）：

body
{
    background-color: gold;
}

#flag_top {
    width: 400px; height: 40px; background: #231f20; position: relative;
    	-webkit-transform: skew(40deg);
	   -moz-transform: skew(40deg);
	     -o-transform: skew(40deg);
    margin-left: 30px;
}
#flag_bottom {
    width: 400px; height: 40px; background: #231f20; position: relative;
    	-webkit-transform: skew(320deg);
	   -moz-transform: skew(320deg);
	     -o-transform: skew(320deg);
    margin-left: 30px;
}

<div id="flag_top">
</div>
<div id="flag_bottom">    
</div>

【讨论】：