Question

＆＃13;

.arrow-top {
	position: relative;
	background: #fff;
	border: 1px solid #ded6d6;
}
.arrow-top:after, .arrow-top:before {
	top: 0%;
	left: 5%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow-top:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 15px;
	margin-left: -15px;
}
.arrow-top:before {
	border-color: rgba(222, 214, 214, 0);
	border-top-color: #ded6d6;
	border-width: 16px;
	margin-left: -16px;
}
.arrow-bot {
	position: relative;
	background: #f0e8ce;
	border: 1px solid #ded6d6;
}
.arrow-bot:after, .arrow-bot:before {
	top: 100%;
	left: 5%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	margin-top: -1px;
}

.arrow-bot:after {
	border-color: rgba(240, 232, 206, 0);
	border-top-color: #f0e8ce;
	border-width: 15px;
	margin-left: -15px;
}
.arrow-bot:before {
	border-color: rgba(222, 214, 214, 0);
	border-top-color: #ded6d6;
	border-width: 16px;
	margin-left: -16px;
}

＆＃13;

<div class="arrow-bot arrow-top" style="border: 1px solid red; height: 100px;">
</div>

＆＃13;

有人可以解释，为什么arrow-top和arrow-bottom没有合作，但他们分开工作正常。另外，如何让它们在容器上协同工作或达到同样的效果？箭头生成器：http://cssarrowplease.com/

Answer 1

您的示例不起作用，因为您似乎将两种不同的样式应用于同一对象。 CSS通常会采用您提供的最后一条规则，但实质上，您不能将两个规则应用于同一元素。为了做你想做的事，你需要有两个独立的div，你可以在这两个div中应用样式！

<style>
// CSS Code from the Question
</style>
<div class="arrow-top></div><div class="arrow-bottom"></div>

为了将它们放在容器中，你可以在另一个div中包围div，并给出一个类。然后调用这个东西并在CSS中声明容器的位置，并在需要它们的地方重新定位div。

希望这有帮助

两个CSS三角类没有一起工作

1 个答案: