带有可点击文本的CSS三角形
带有可点击文本的CSS三角形
提问于 2017-09-27 05:17:51
我没有使用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稍后将不知道如何更正)。
我还试图将这些三角形中的每一个都换成不同的颜色，但我做不到。
回答 1
Stack Overflow用户
发布于 2017-09-27 16:58:30
你的意思是这样；codePen
使用a而不是div，用户边框颜色来提供颜色
<style>#pentagonbotmid{border-bottom-color:#E1B225} #pentagontopleft{border-bottom-color:#F48024}#pentagontopright{border-bottom-color:#DC4E51}#pentagonbotright{border-bottom-color:#1DA1F2}#pentagonbotleft{border-bottom-color:#4267B2}</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46435991
复制相关文章
相似问题
腾讯云开发者
