0
我沒有CSS經驗，想知道如何在每個三角形內點擊文本？帶可點擊文本的CSS三角形
#pentagontopleft {
margin: 70px 0 5px 150px;
position: relative;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
transform: rotate(144deg);
-ms-transform: rotate(144deg);
/* IE 9 */
-webkit-transform: rotate(144deg);
/* Safari and Chrome */
}
#pentagontopright {
margin: 70px 0 5px -180px;
position: relative;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
transform: rotate(216deg);
-ms-transform: rotate(216deg);
/* IE 9 */
-webkit-transform: rotate(216deg);
/* Safari and Chrome */
}
#pentagonbotright {
margin: -85px 0 5px -80px;
position: relative;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
transform: rotate(288deg);
-ms-transform: rotate(288deg);
/* IE 9 */
-webkit-transform: rotate(288deg);
/* Safari and Chrome */
}
#pentagonbotleft {
margin: -85px 0 5px 100px;
position: relative;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
transform: rotate(72deg);
-ms-transform: rotate(72deg);
/* IE 9 */
-webkit-transform: rotate(72deg);
/* Safari and Chrome */
}
#pentagonbotmid {
margin: -150px 0 5px 225px;
width: 0;
border-width: 0 164px 222px 164px;
border-style: solid;
border-color: #37272e transparent;
display: inline-block;
}
canvas {
margin-left: -50px;
}
.log {
position: relative;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
border-top: 180px solid black;
border-right: 100px solid transparent;
display: inline-block;
transition: all .25s ease;
}
.log:hover {
border-top-color: rgba(255, 255, 255, .5);
}
.log:hover .login {
color: #000;
}
.login {
position: absolute;
color: #fff;
left: -50%;
top: -90px;
display: block;
width: 200px;
height: 180px;
transform: translate(-50%, -50%);
text-align: center;
box-sizing: border-box;
padding: 30px 0;
transition: all .25s ease;
}<div id="pentagontopleft" class="pentagon"></div>
<div id="pentagontopright" class="pentagon"></div><br>
<div id="pentagonbotleft" class="pentagon"></div>
<div id="pentagonbotright" class="pentagon"></div><br>
<div id="pentagonbotmid" class="pentagon"></div>這是沒有必要的，三角形是這個尺寸，但最好不要改變它們的大小（poiss不知道以後該怎麼正確的）。
我也試圖把每個這些三角形用不同的顏色，我不能。
它很容易的顏色，只是改變邊框顏色 –