使用css创建自定义箭头形状 [英] Use css to create a custom arrow shape

问题描述

我有一个css箭头框覆盖图像滑块，但我需要使尾缩进和透明，所以图像被看到它。需要白色部分是透明的。请参见下面的附图和我的CSS。感谢。

I have a css arrow box overlaying an image slider but I need to make the tail indented and transparent so the image is seen behind it. Need the white portion to be transparent. See attached image and my css below. Thanks.

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

}

推荐答案

很简单。您只需要将 :: before 伪元素的顶部/底部边框的颜色设置为背景颜色，并将左边框的颜色更改为透明。

This is pretty simple. You just need to set the color of top/bottom borders of the ::before pseudo-element to the background color and change the color of left border to transparent.

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

Then you could use margins/offsets to position the pseudo-element properly.

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

<div id="flag">This is it!</div>

这篇关于使用css创建自定义箭头形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！