我必须错过一个简单的步骤。我在CSS中创建了一个三角形,我试图将文本放在三角形的顶部。如果我没有OracleCommand loCmd = Connection.CreateCommand();
loCmd.CommandType = CommandType.Text;
loCmd.CommandText = "select seqname.nextval from dual";
long lnNextVal = Convert.ToInt64(loCmd.ExecuteScalar());
和width:0;
,但是如果没有它,则三角形的大小不正确。文本在那里,但它不会显示在三角形上。有人可以帮忙吗?
height:0;
这是HTML
.log{ /*bottom*/
width:0; height:0;
top:73.2%; left:36.4%;
z-index:2;
background-color:#E3DFD2;
border-top:12vw solid black;
border-right:9vw solid transparent ;
border-left:9vw solid transparent;
transform-origin: -10% -10%;
transition:transform .2s .1s;
color:#FFFFFF;
}
.log:hover{
border-top:12vw solid white;
border-right:9vw solid transparent ;
border-left:9vw solid transparent;
opacity:.5;
color:#000000;
}
答案 0 :(得分:2)
试试这个
.up {
width: 0px;
height: 0px;
border-style: inset;
border-width: 0 100px 173.2px 100px;
border-color: transparent transparent blue transparent;
float: left;
transform:rotate(180deg);
display:block
}
.up span {
text-align: center;
left: -47px;
top:25px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
transform:rotate(180deg);
display:block;
}

<a class="up" href="#">
<span>TEXT TEXT TEXT</span>
</a>
&#13;
答案 1 :(得分:2)
也许尝试这样的事情:
body{
background: red;
}
.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;
}
<a class="log" href="#">
<span class="login">Member<br>LogIn</span>
</a>