html - 在标题中创建三 Angular 形作为链接

Question

我正在制作的网站上有一个与此类似的布局。我现在这样做的方式基本上就是将布局作为图像并将其作为背景并在其上方添加链接。我现在希望能够在悬停时改变三 Angular 形的颜色。我如何将这个布局纯粹作为 HTML 和 CSS 元素来创建？ header
这就是标题当前的样子

.back {
	max-width: 100%;
	z-index: -1;
}
.About {
	position: absolute;
	color: #FFF;
	z-index: 1;
	left: 17%;
	top: 3%;
}

<img class="back" style="background-color: #020105;" src="/image/aIUCw.png"/>
	<div class="About"><a href="">ABOUT</a></div>

Answer 1

这是垃圾，但我能快速想到的最好的..

https://jsfiddle.net/Hastig/hL9ffjwy/

我的方法需要 jQuery 来计算大小并使其响应。调整 jQuery 高度“除以 #”以调整最适合您的 Angular 。

使用 transform 可能是更好的方法

$(window).on("resize", function () {
  var containerWidth = $('.container').width();
  var triangleWidth = containerWidth / 2;
  var triangleHeight = containerWidth / 6;
  $('.triangle.left').css('borderWidth', triangleHeight + 'px 0 0 ' + triangleWidth + 'px');
  $('.triangle.right').css('borderWidth', triangleHeight + 'px ' + triangleWidth + 'px 0 0');
}).resize();

body {
  margin: 0;
}
.container {
  position: relative;
  display: flex;
  width: 100%;
  /*background-color: gray;*/
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: hsla(211, 100%, 50%, 1) transparent transparent transparent;
}
.triangle.left {

}
.triangle.right {

}
.link.left:hover ~ .triangle.left,
.link.right:hover ~ .triangle.right{
  border-color: hsla(342, 100%, 50%, 1) transparent transparent transparent;
}
.link {
  position: absolute;
  top: 0; 
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
}
.link.left {
  left: 0;
}
.link.right {
  right: 0;
}
.link span {
  position: absolute;
  font-weight: bold;
  color: white;
  font-variant: small-caps;

}
.link.left span {
  top: 40%;  left: 70%;
  transform: translateY(-60%) translateX(-30%);
}
.link.right span {
  top: 40%;  left: 30%;
  transform: translateY(-60%) translateX(-70%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <a class="link left" href="http://stackoverflow.com/questions/44079168/"><span>Stack</span></a>
  <a class="link right" href="http://stackoverflow.com/questions/44079168/"><span>Question</span></a>
  <div class="triangle left" href="#"></div>
  <div class="triangle right" href="#"></div>
</div>