我在我正在制作的网站上有类似于这个的布局。我现在这样做的方式基本上就是将布局作为图像并将其作为背景,并在其上方添加链接。我现在希望能够在悬停时改变三角形的颜色。我如何创建这个布局纯粹作为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>
答案 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高度'除以#',将角度调整为最适合你的角度。
进行此操作可能是更好的方法
$(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>