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を後で修正する方法を知ることができません）それらのサイズを変更しないことが必要ではありません。
私はまた、これらの三角形のそれぞれを別の色で配置しようとしていますが、できません。
を与えるために代わりのdiv、ユーザーボーダーカラーの使用 –