Question

我在我正在制作的网站上有类似于这个的布局。我现在这样做的方式基本上就是将布局作为图像并将其作为背景，并在其上方添加链接。我现在希望能够在悬停时改变三角形的颜色。我如何创建这个布局纯粹作为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="https://i.stack.imgur.com/aIUCw.png"/>
	<div class="About"><a href="">ABOUT</a></div>

Answer 1

你可以用CSS，三个相同的三角形来做。

triangle-base是背景黑色的基本三角形（如果删除里面的两个三角形，则可以看到它是一个纯黑色三角形）

要实现三角形边框效果和中线效果，我们需要左右两个相同的三角形，但我们将这些内三角形向上移动2px，内部左移向左移动1px，内右移1px右。

另外，您可以看到.inner-triangle-left的{{1}}和border-left的宽度为0，高度为0的左侧三角形，以便了解更多内容：

https://css-tricks.com/snippets/css/css-triangle/

然后你可以看到边界和中心线。更改背景颜色以更好地了解发生的事情。

border-top

body {
  background: white;
  margin: 0;
}

.triangle-base {
  width: 0;
  height: 0;
  border-left: 40vw solid transparent;
  border-right: 60vw solid transparent;
  border-top: 100px solid black;
}

.inner-triangle-left {
  position: relative;
  top: -102px;
  left: calc(-40vw - 1px);
  width: 0;
  height: 0;
  border-left: 40vw solid transparent;
  border-top: 100px solid white;
}

.inner-triangle-right {
  position: relative;
  top: -202px;
  left: 1px;
  width: 0;
  height: 0;
  border-right: 60vw solid transparent;
  border-top: 100px solid white;
}

Answer 2

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

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

我的方式需要jQuery来计算大小并使其响应。调整jQuery高度'除以＃'，将角度调整为最适合你的角度。

使用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>

在标题中将三角形创建为链接

2 个答案: