我在我製作的網站上有一個與此類似的佈局。我現在的做法基本上只是將佈局作爲圖像，並將其作爲背景，並將其作爲背景。我現在希望能夠在懸停時改變三角形的顏色。我如何將這個佈局純粹作爲HTML和CSS元素來創建？ header
這是標題如何目前
創建三角形作爲標題中的鏈接
.back {
\t max-width: 100%;
\t z-index: -1;
}
.About {
\t position: absolute;
\t color: #FFF;
\t z-index: 1;
\t left: 17%;
\t top: 3%;
}<img class="back" style="background-color: #020105;" src="https://i.stack.imgur.com/aIUCw.png"/>
\t <div class="About"><a href="">ABOUT</a></div>這是垃圾，但最好我能想出的快速..
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>你可以用CSS做，三個相同的三角形。
triangle-base是基本三角形底黑字（如果去掉兩個三角形裏面你可以看到它是一個堅實的黑色三角形）
爲了實現三角形邊界效應和中間線效應我們需要兩個左右相同的三角形，但是我們將這些內部三角形向上移動2px，並且向左移動內部左移1px，向右移動內部右移1px。
而且你可以看到.inner-triangle-left有border-left和border-top寬度爲0，高度爲0，使左三角形，瞭解更多的在這裏閱讀：
https://css-tricks.com/snippets/css/css-triangle/
然後，你可以看到邊框和中心線。更改背景顏色以更好地瞭解發生了什麼。
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;
}<div class="triangle-base">
<div class="inner-triangle-left"></div>
<div class="inner-triangle-right"></div>
</div>
這樣做，如果您發佈了HTML和CSS在這裏和喜歡的jsfiddle一個公開編輯編輯器或codepen你會得到更多/更好的反應:) –
@HastigZusammenstellen這是更好嗎？ –
爲了讓你從這裏開始學習[三角形生成器]（http://apps.eky.hk/css-triangle-generator/），並且有一堆很好的css三角教程，它們將隨着搜索彈出。 –