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

时间:2017-05-19 21:21:56

标签: html css

我在我正在制作的网站上有类似于这个的布局。我现在这样做的方式基本上就是将布局作为图像并将其作为背景,并在其上方添加链接。我现在希望能够在悬停时改变三角形的颜色。我如何创建这个布局纯粹作为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>

2 个答案:

答案 0 :(得分:0)

你可以用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;
}

答案 1 :(得分:0)

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

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>