如何用css创建透明箭头

Question

我正在尝试在css中使用after后在div中创建箭头，但是无法根据需要创建它。

这是我想要创建的示例图片：

这是我创建的，但不确定如何控制箭头的背景颜色

.discount-tag {
	position: relative;
	float: left;
	background-color: rgba(61,97,153,0.9);
	font-size: 16px;
	color: #fff;
	text-transform: uppercase;
	padding: 7px 22px 7px 10px;
}
.discount-tag:after {
	right: 0;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #106199;
	border-width: 17px;
	margin-top: -17px;
}

<div class="discount-tag"> 10% Discount </div>

Answer 1

尝试使用两个箭头部分。在:before上设置一个，在:after

上设置一个

＆＃13;

＆＃13;

.discount-tag {
  position: relative;
  float: left;
  background-color: rgba(61,97,153,0.9);
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  padding: 7px 22px 7px 10px;
}
.discount-tag:before,
.discount-tag:after {
  content: '';
  display: block;
  position: absolute;
  right: -16px;
  width: 0;
  height: 0;
  border-style: solid;
}
.discount-tag:before {
  top: 0;
  border-width: 16px 16px 0 0;
  border-color: rgba(61,97,153,0.9) transparent transparent transparent;
}
.discount-tag:after {
  bottom: 0;
  border-width: 16px 0 0 16px;
  border-color: transparent transparent transparent rgba(61,97,153,0.9);
}

＆＃13;

<div class="discount-tag"> 10% Discount </div>

＆＃13;

＆＃13;

＆＃13;

更明显的是，这里发生的事情是相同的，但是使用虚拟颜色

＆＃13;

＆＃13;

.discount-tag {
  position: relative;
  float: left;
  background-color: rgba(61,97,153,0.9);
  font-size: 16px;
  color: #fff;
  text-transform: uppercase;
  padding: 7px 22px 7px 10px;
}
.discount-tag:before,
.discount-tag:after {
  content: '';
  display: block;
  position: absolute;
  right: -16px;
  width: 0;
  height: 0;
  border-style: solid;
}
.discount-tag:before {
  top: 0;
  border-width: 16px 16px 0 0;
  border-color: green transparent transparent transparent;
}
.discount-tag:after {
  bottom: 0;
  border-width: 16px 0 0 16px;
  border-color: transparent transparent transparent red;
}

＆＃13;

<div class="discount-tag"> 10% Discount </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以旋转伪和使用框阴影来绘制父标记的背景。

所以你可以通过箭头看到任何简单或复杂的背景。

Box-shadow也可以让你画边框：

.discount-tag {
	position: relative;
	float: left;
	font-size: 16px;
	color: #fff;
	text-transform: uppercase;
	padding: 7px 32px 7px 10px;/* update */
  overflow:hidden;/* added */
}
.discount-tag:before {
	right: -21px;/* update */
	top: 0;
  bottom:0;/* added */
  width:34px;/* added */
  transform:rotate(45deg);/* added */
	content: " ";
	position: absolute;
  z-index:-1;/* added */
	pointer-events: none;
  box-shadow:0 0 0 50vw  rgba(61,97,153,0.9)/* added */
    /* border : removed */
}
body {
  background:url(http://lorempixel.com/600/800);/* see transparency */
  }

/* extra a border needed ? */
.discount-tag:before {  
  box-shadow:0 0 0 50vw  rgba(61,97,153,0.9), inset 1px -1px white;
  }

  .discount-tag {
    box-shadow: -1px 1px white, -1px -1px white

<div class="discount-tag"> 10% Discount </div>

如果您仍想使用border：put pseudo outside：

.discount-tag {
	position: relative;
	float: left;
	background-color: rgba(61,97,153,0.9);
	font-size: 16px;
	color: #fff;
	text-transform: uppercase;
	padding: 7px  10px;
}
.discount-tag:after {
	left:100%;
	top: 50%;
	border: solid  rgba(61,97,153,0.9);
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color:transparent;
	border-width: 17px;
  border-left:none;
	margin-top: -17px;
}

body {
 background:url(http://lorempixel.com/600/800);/* see transparency */
}

<div class="discount-tag"> 10% Discount </div>

也可以画出边界：

.discount-tag {
	position: relative;
	float: left;
	background-color:#3A609B;
	font-size: 16px;
	color: #fff;
	text-transform: uppercase;
	padding: 7px  10px;
 
}
.discount-tag:before,.discount-tag:after  {
	left:100%;
	top: 50%;
	border: solid  #3A609B;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color:transparent;
	border-width: 17px;
  border-left:none;
	margin-top: -17px;
}


body {
 background:url(http://lorempixel.com/600/800);/* see transparency */
}


/* draw border around ? */
.discount-tag:before {
  border-width:18px;
  margin-top:-18px;
  margin-left:1px;
  border-color:white;
  border-right-color:transparent;
  }
.discount-tag {
  border:1px solid white

<div class="discount-tag"> 10% Discount </div>

Answer 3

你可以添加2个伪，并将它们倾斜以创建箭头的尾部：

＆＃13;

＆＃13;

.discount-tag {
  position: relative;
  float: left;
  background-color: blue;
  font-size: 60px;
  color: #fff;
  text-transform: uppercase;
  padding: 7px 22px 7px 10px;
}
.discount-tag:before,
.discount-tag:after {
  content: " ";
  left: 0;
  right: 0;
  height: 50%;
  position: absolute;
  pointer-events: none;
  background-color: blue;
  z-index: -1;
}
.discount-tag:before {
  top: 0;
  transform-origin: center bottom;
  transform: skewX(-35deg);
}
.discount-tag:after {
  bottom: 0;
  transform-origin: center top;
  transform: skewX(35deg);
}

＆＃13;

<div class="discount-tag">10% Discount</div>

＆＃13;

＆＃13;

＆＃13;